为什么字体较小时高度会增加？

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

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

这效果很好。但是，如果我也给内容设置较小的字体大小

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

该块实际上变得更高。这是为什么？

.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. Or to 1em。或者甚至到normal。那么发生了什么？是个line-height通过将字体大小设置为一些奇怪的值.6em? Why?

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

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

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

因此，请允许我用图片稍微澄清一下解决方案。

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

现在我们假设字体带有 1/4 下行部。也就是说，如果您有 20px 字体，则下降部分为 5 像素，上升部分为 15 像素。然后，剩余的行高（在本例中为 40 像素）在基线上方和下方均等划分，如下所示。

对于较小字体（0.6em 或 12 像素）的块，行高的剩余量为 60-12 或 48 像素，也被平均划分：基线上方 24 个，基线下方 24 个。

然后，如果我们将两种字体组合在同一基线上，您将看到行高没有以相同的方式划分，因此包含块的总高度会增加，即使两个行高都是 60 像素。

希望这能解释一切！