Question

我已经构建了一个带有文本类和辅助间距类的样式指南。最近对于一个功能，开发人员指出，根据类的行高（即使只有一行文本），在文本块的上方和下方添加了额外的间距，这是在设计中造成不一致。

我环顾四周，仍然无法找到解决方案来解决这个问题。由于我正在开发的产品是动态平台，因此逐个案例的静态css修复将无法正常工作。我该如何解决这个问题？

large {
    display: inline-block;
    font-size: 50px;
    background-color: lightgrey;
    line-height: 50px;
    margin: 0px;
    padding: -10px;/*this doesn't work*/
}
medium {
    display: inline-block;
    font-size: 20px;
    background-color: lightgrey;
    line-height: 20px;
    margin: 0px;
    padding: -10px;/*this doesn't work*/
}

<div style="color:#0000FF; padding-top:20px;">
<large>BIG</br>TEXT</large>
<medium>BIG</br>TEXT</medium>
</div>

如果你根据线条高度看上面的例子，那么还有一个额外的间距是文本上下文字高度的1/2。我怎么能阻止这种情况发生

Answer 1

看到片段中没有空格

＆＃13;

large {
    float:left;
    font-size: 50px;
    background-color: lightgrey;
    line-height: 50px;
    margin: 0px;
    padding: -10px;/*this doesn't work*/
}
medium {
    display: inline-block;
    font-size: 20px;
    background-color: lightgrey;
    line-height: 20px;
    margin: 0px;
    padding: -10px;/*this doesn't work*/
}

＆＃13;

<div style="color:#0000FF; padding-top:20px;">
<large>BIG</br>TEXT</large>
<medium>BIG</br>TEXT</medium>
</div>

＆＃13;

Answer 2

我认为这就是你要找的东西，

我在这里做的是减少行高，这样就可以删除文本上下不必要的空间，并增加文本与样式化<br>标记之间的空间

＆＃13;

br{
	content: "";        
	margin: 2em;
	display: block;
	font-size: 10%;
}
large {
    display: inline-block;
    font-size: 50px;
    background-color: lightgrey;
    line-height: 35px;
    margin: 0;
    padding: 0;
}
medium {
    display: inline-block;
    font-size: 20px;
    background-color: lightgrey;
    line-height: 14px;
    margin: 0;
    padding: 0;
}

＆＃13;

<div style="color:#0000FF; padding-top:20px;">
	<large>BIG<br/>TEXT</large>
	<medium>BIG<br/>TEXT</medium>
</div>

＆＃13;

希望有所帮助

动态删除来自行高的文本上方和下方不必要的空格

2 个答案:

看到片段中没有空格