html – 影响甚至无文本块的行高

概述我注意到行高似乎会影响块.我很奇怪,以前从未注意到这种令人不安的影响. 问题是它会影响块,即使它们根本不包含文本. 我created a JSFiddle来证明这个问题.如果将line-height设置为0,则灰色区域将不再超过容器内图像的灰度区域. 为什么会发生这种情况并且有一种干净的方法来阻止它？ 即使在没有文本的情况下,行高值也会影响渲染,因为“’line-height’指定元素中行框的最小 我注意到行高似乎会影响块.我很奇怪,以前从未注意到这种令人不安的影响.

问题是它会影响块,即使它们根本不包含文本.

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

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

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

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

另一种消除干扰效果的方法是在img元素上设置display：block.然后元素将以不同的方式格式化.

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

总结

以上是内存溢出为你收集整理的html – 影响甚至无文本块的行高全部内容，希望文章能够帮你解决html – 影响甚至无文本块的行高所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。