行高甚至影响无文本块

Question

我注意到行高似乎会影响块。对我来说很奇怪，以前从未注意到这种令人不安的影响。

问题在于它会影响块，即使它们根本不包含文本。

我created a JSFiddle来证明这个问题。如果将line-height设置为0，则灰色区域将不再超过容器内图像的灰度区域。

为什么会发生这种情况并且有一种干净的方法来阻止它？

Answer 1

即使没有文本，line-height值也会影响渲染，因为“'line-height'指定元素中线框的最小高度。最小高度包括基线上方的最小高度和其下方的最小深度，就像每个线框以零宽度内联框开头一样，其中包含元素的字体和线高属性。“（CSS 2.1 about line-height。）

但这不是原因。默认情况下，图像是内联呈现的，这意味着它们可以作为大（或可能是小）字母，位于文本的基线上。细节很复杂，但是通过将line-height设置为比字体大小小得多，您可以使基线彼此更接近并且空间消失。

消除令人不安的影响的另一种方法是在display: block元素上设置img。然后元素将以不同的方式格式化。

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