我注意到行高似乎会影响 block 。令我感到奇怪的是，我以前从未注意到这种令人不安的效果。
问题是它会影响 block ，即使它们根本不包含文本。
我created a JSFiddle来证明这个问题。如果将line-height设置为0，灰色区域将不再超过容器内图片的高度。
为什么会发生这种情况，是否有一种干净的方法来防止这种情况发生？
最佳答案
即使没有文本，line-height 值也会影响渲染，因为“'line-height'”指定元素内行框的最小高度。最小高度由基线上方的最小高度和基线下方的最小深度组成，就好像每个行框都以具有元素字体和行高属性的零宽度行内框开始一样。” ( CSS 2.1 about line-height .)
但这真的不是这里的原因。默认情况下，图像以内联方式呈现，这意味着它们充当大(或小)字母，位于文本的基线上。细节很复杂，但是通过将 line-height 设置得比字体大小小得多，您可以将基线彼此靠近，并且空间消失。
另一种消除干扰效果的方法是在 img 元素上设置 display: block。然后元素将以不同的方式格式化。
另一种方法是在 img 元素上设置 vertical-align: bottom。
关于html - 行高甚至影响无文本 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12133024/