问题描述
我注意到line-height似乎影响块。对我来说奇怪，我从来没有注意到这种令人不安的效果。
问题是它会影响块，即使它们根本不包含文本。 p>
我来演示这个问题。如果您将line-height设置为0，则灰色区域将不会超过容器内的图片。
为什么会发生这种情况，阻止它？
line-height 缺少文本，因为'line-height'指定元素中行框的最小高度。最小高度由基线上方的最小高度和其下面的最小深度组成，正如每个线框以带有元素的字体和线高度属性的零宽度内联框开始一样。（）。 p>
但这真的不是原因。默认情况下，图像呈现为内联呈现，这意味着它们作为大（或小）字母，坐在文本的基线上。细节很复杂，但是通过设置 line-height 大大小于字体大小，您将基线彼此靠近，空间消失。
另一种消除干扰效果的方法是在 img 元素上设置 display：block 。
另一种方法是设置 vertical-align：bottom 元素 img 。
I noticed that line-height seems to affect blocks. Its strange to me, that i never noticed this disturbing effect before.
The problem is that it will affect blocks, even if they do not contain text at all.
I created a JSFiddle to demonstrate the issue. If you set line-height to 0, the grey area will no longer exceed that of the image inside the container.
Why is this happening and is there a clean way to prevent it?
The line-height value affects rendering even in the absence of text, since "'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties." (CSS 2.1 about line-height.)
But that’s really not the cause here. Images are by default rendered inline, meaning that they act as big (or maybe small) letters, sitting on the baseline of text. The details are complicated, but by setting line-height considerably smaller than font size, you put baselines closer to each other and the space vanishes.
Another way to remove the disturbing effect is to set display: block on the img element. Then the element will be formatted in a different way.
Yet another way is to set vertical-align: bottom on the img element.
这篇关于行高影响甚至无文本块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！