html - 为什么高度会随着较小的字体大小而增加？

Question

我有一个具有特定行高的 block ，我在其中使用 ::before 伪元素插入内容。

.block::before {
  content:'text here';
}

这很好用。但是，如果我也给内容一个较小的字体大小

.block::before {
  font-size:.6em;
  content:'text here';
}

方 block 实际上变高了。这是为什么？

.container {
    display:inline-block;
}
.lorem, .ipsum, .dolor, .sit {
    line-height:3em; border:1px solid green
}
.ipsum:before {
    content:'world!';
}
.sit:before {
    font-size:.6em;
    content:'world!';
}

<div class="container">
    <div class="lorem">Hello</div>
</div>
<div class="container">
    <div class="ipsum"></div>
</div>
<hr style="clear:both"/>
<div class="container">
    <div class="dolor">Hello</div>
</div>
<div class="container">
    <div class="sit"></div>
</div>

顶行没有字体大小变化，底行有。

现在我发现一个可能的解决方案是将伪元素的line-height设置为0。或者到 1em。甚至是正常。那么发生了什么？是否通过将字体大小设置为 .6em 将 line-height 设置为某个奇怪的值？为什么？

PS 虽然这看起来像是重复的(见右边的列表)，但到目前为止我读过的答案都没有解释为什么设置 line-height:normal 可以解决问题。一定有什么事情发生，隐式地将行高设置为更大的值。这就是我想要找出的。

Answer 1

编辑:这个问题最近引起了很多新的关注，所以这里进行更新以使其更有用。

---

Alohci 的解决方案是正确的，但对于更倾向于图形化的人来说可能不是绝对清楚。

所以请允许我用图片澄清一下解决方案。

首先，行高作为其计算出的大小被继承，因此尽管它以 em 单位指定，但子项将继承以像素为单位的值。例如，对于 20px 的字体大小和 3em 的行高，行高将为 60 像素，即使对于具有不同字体大小的后代(除非他们指定他们的自己的行高)。

现在让我们假设一个带有 1/4 下行的字体。也就是说，如果您使用 20 像素的字体，则下行端为 5 像素，上行端为 15 像素。剩余的行高(在本例中为 40 像素)然后在基线上方和下方平均分配，如下所示。

对于字体较小的 block (0.6em 或 12 像素)，行高的剩余量为 60-12 或 48 像素，也被平分:基线上方 24 像素，基线下方 24 像素。

然后如果我们在同一条基线上组合两种字体，你会看到行高的划分方式不一样，所以包含 block 的总高度增加了，即使两个行高都是 60 像素。

希望这能解释一切!