行高影響甚至無文本塊

Question

我注意到行高似乎會影響塊。對我來說很奇怪，我以前從未注意到這種令人不安的影響。

問題是，它會影響塊，即使它們根本不包含文本。

我created a JSFiddle來演示這個問題。如果將行高設置爲0，則灰色區域將不再超過容器內圖像的灰度區域。

爲什麼會發生這種情況，並有一個乾淨的方法來防止它？

Answer 1

即使在沒有文本的情況下，line-height的值也會影響渲染，因爲「'line-height'指定元素內線框的最小高度。最小高度由基線上方的最小高度和下方的最小深度組成，就好像每個線框始於具有元素的字體和線條高度屬性的零寬度內聯框。「（CSS 2.1 about line-height。）

但這不是真正的原因。默認情況下，圖像呈現爲內聯，這意味着它們充當大（或小）字母，坐在文字的基線上。細節很複雜，但通過將line-height設置爲比字體大小更小，可以將基線彼此靠得更近，並且空間消失。

消除干擾效應的另一種方法是在img元素上設置display: block。然後該元素將以不同的方式格式化。

另一種方法是在img元素上設置vertical-align: bottom。