減小字體大小如何導致高度增加？
我有一個具有特定行高的區塊，我在其中插入帶有 ::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 可以解決問題。一定發生了一些事情，隱式地將行高設定為更大的值。這就是我想要找出的答案。 