减小字体大小如何导致高度增加？-PHP中文网问答

我有一个具有特定行高的块，我在其中插入带有 ::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。或者到1em。或者甚至到 normal。那么发生了什么？通过将字体大小设置为 .6em 是否将 line-height 设置为一些奇怪的值？为什么？

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