減小字體大小如何導致高度增加？

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。