Wie führt eine Reduzierung der Schriftgröße zu einer Erhöhung der Höhe?

Question

Ich habe einen Block mit einer bestimmten Zeilenhöhe, in den ich Inhalte mit einem ::before Pseudoelement einfüge.

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

Das funktioniert großartig. Aber wenn ich dem Inhalt auch eine kleinere Schriftgröße gebe

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

Die Blöcke werden tatsächlich höher. Warum das?

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

In der oberen Zeile ändert sich die Schriftgröße nicht, in der unteren Zeile jedoch.

Jetzt habe ich eine mögliche Lösung gefunden, die darin besteht, die line-height设置为0。或者到1em。或者甚至到 normal。那么发生了什么？通过将字体大小设置为 .6em 是否将 line-height des Pseudoelements auf einen seltsamen Wert zu setzen? Warum?

PS Obwohl dies wie ein Duplikat erscheinen mag (siehe Liste rechts), erklärt keine der Antworten, die ich bisher gelesen habe, warum die Einstellung line-height:normal den Trick macht. Es muss etwas passieren, um die Zeilenhöhe implizit auf einen größeren Wert zu setzen. Das ist es, was ich herausfinden möchte.

Answer 1

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

---

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

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

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

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

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

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

希望这能解释一切！

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。