减小字体大小如何导致高度增加？

Question

我有一个具有特定行高的块，我在其中插入带有 ::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 可以解决问题。一定发生了一些事情，隐式地将行高设置为更大的值。这就是我想要找出的答案。

Answer 1

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

---

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

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

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

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

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

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

希望这能解释一切！

Answer 2

.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。