如果我增加 span 元素内容的行高，则每行上方和下方的空间都会增加。但是，如果我将行高降低到 1 以下，则什么也不会发生。以下是我正在尝试的代码；我更改了 span 的内联样式属性中的值
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
<span style="line-height: 0.1">
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
</span>
<span>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
</span>
</p>
</body>
</html>
最佳答案
行高是其字体大小的倍数。假设，如果您将字体大小设置为 12px，则设置为 1.5 的行高等于 12*1.5=18px。
关于 block 级元素的行高的事实如您预期的那样工作，但对于行内级元素，行高不能低于其字体大小。因此，将 line-height 设置为低于 1 的值是无效的，因为 0.5*12=6px 小于 font-size。
如果你希望它的行高低于它的字体大小，那么你需要明确地将它的样式设置为 block 级别:
span{
display: block;/*or inline-block*/
font-size: 16px;
line-height: .5;/*equal to 8px*/
}
还有更多关于行高的知识。看看w3c
On a block container element whose content is composed of inline-level elements, '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. We call that imaginary box a "strut."
When an element contains text that is rendered in more than one font, user agents may determine the 'normal' 'line-height' value according to the largest font size.
总结:
在行内层级元素中，高度不能设置成行高不能低于它的高度。
关于html - 为什么我们不能将 span 元素的 line-height 设置为小于 1？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35172256/