行高甚至影响无文本块

时间:2012-08-26 19:03:59

标签: html css

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

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

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

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

1 个答案:

答案 0 :(得分:9)

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

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

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

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