我注意到 line-height 似乎会影响块。这对我来说很奇怪，我以前从未注意到这种令人不安的影响。
问题是它会影响块，即使它们根本不包含文本。
我创建了一个 JSFiddle来演示这个问题。如果将 line-height 设置为 0，灰色区域将不再超过容器内图像的灰色区域。
为什么会发生这种情况，有没有一种干净的方法来防止它？
问问题
1977 次
1 回答
10
即使没有文本，该line-height值也会影响渲染，因为“'line-height' 指定元素内行框的最小高度。最小高度由基线上方的最小高度和基线下方的最小深度组成，就像每个行框都以具有元素字体和行高属性的零宽度行内框开始一样。” （CSS 2.1 关于line-height。）
但这真的不是这里的原因。默认情况下，图像是内联渲染的，这意味着它们充当大（或者可能是小）字母，位于文本的基线上。细节很复杂，但通过设置line-height比字体大小小得多，您可以将基线彼此靠近并且空间消失。
另一种消除干扰效果的方法是display: block在img元素上设置。然后元素将以不同的方式格式化。
还有一种方法是vertical-align: bottom在img元素上设置。
于 2012-08-26T19:25:57.987 回答