css - 动态删除来自行高的文本上下不必要的空间

Question

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

我环顾四周，仍然找不到解决这个问题的方法。由于我正在开发的产品是一个动态平台，因此根据具体情况进行静态 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

我想这就是你要找的，

我在这里所做的是降低行高，这样它会删除文本上方和下方不必要的空间，并增加带有程式化 <br> 的文本之间的空间。标签

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;
}

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

希望对你有帮助