我有一个具有特定行高的块，我在其中插入带有 ::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 设置为一些奇怪的值？为什么？
line-height:normal 可以解决问题。一定发生了一些事情，隐式地将行高设置为更大的值。这就是我想要找出的答案。
编辑：这个问题最近引起了很多新的关注，因此这里进行了更新以使其更有用。
Alohci 的解决方案是正确的，但对于更倾向于图形化的人来说可能不是绝对清楚。
所以请允许我用图片来澄清一下解决方案。
首先，line-height 继承为其计算的大小，因此虽然它是以
em单位指定的，但子级将继承以像素为单位的值。例如，如果字体大小为20px且行高为3em，则行高将为 60 像素，即使对于具有不同字体大小的后代（除非他们指定其自己的行高）。现在我们假设字体带有 1/4 下降部。也就是说，如果您有 20px 字体，则下降部分为 5 像素，上升部分为 15 像素。然后将剩余的行高（在本例中为 40 像素）在基线上方和下方均分，如下所示。
对于较小字体（0.6em 或 12 像素）的块，行高的剩余量为 60-12 或 48 像素，它也被平均划分：基线上方 24 个，基线下方 24 个。
然后，如果我们将两种字体组合在同一基线上，您将看到行高没有以相同的方式划分，因此包含块的总高度会增加，即使两个行高都是 60 像素。
希望这能解释一切！
.lorem、.ipsum、.dolor 和 .sit 框的高度都是它们包含的单行框的高度。
每个行框的高度是该行的支柱和该行中的文本的基线之上的高度+基线之下的最大高度的最大值。因为支柱和文本在基线上对齐。
为了清楚起见，下面的高度（以em为单位）是指整个容器（即body元素）的字体大小
在 .ipsum 中（字体大小为 1em），支柱和文本的基线以上高度为 1em（上半部领先）+ 13/16em（上升部分，大约），高度基线以下是 1em（半行前）+ 3/16em（下降部分，大约）+ 1em（下半行前），总共 3em。
在.sit（字体大小为0.6em）中，基线以上的高度是[1em（上半部前导）+ 13/16em（上升部分，大约）支柱]和[1.2]中的最大值em（上半部分领先）+ 0.6 x 13/16em（上升部分，大约）]，基线以下的高度是[1em（下半部分领先）+ 3/16em（上升部分）中的最大值下降部分，大约）用于支柱]和[1.2em（下半部前导）+ 0.6 x 3/16em（下降部分，大约）用于文本]。
对其进行评估并转换为小数，得出基线以上 1.8125em，基线以下 1.3125em，总计 3.125em，大于 .ipsum 的 3em。