为什么CSS属性'line-height'不能让我在Chrome中制作严格的行间距？

Question

我有一个段落标记,我在其他地方定义了一个15px的行高,我在页面的下方还有另一个段落标记,我想让行高达10px左右.有趣的是,它不会让我下降到10px或任何小于那个,但当我将它设置为25px或更高时,行高属性似乎工作.

我通过Chrome浏览器的网络开发者工具(Chrome的Firebug版本)检查了相关的CSS(所有手工编码),但找不到任何相关内容.是否有一个常见的CSS错误,阻止我缩小行高超过一定的最小量？

Answer 1

我在Firefox和Chrome中都注意到,如果设置HTML5 doctype,则内联元素的最小行高.对于块元素,您可以将行高设置为您想要的任何值,甚至可以使行重叠.

如果未设置HTML5 doctype,则块或内联元素没有最小行高.

对吧.例如,如果你有一个`span`,将它设置为`display:block`就可以解决这个问题.虽然我想知道这是否是html5标准的预期功能.这对我来说似乎很混乱. (11认同)
这应该是批准的答案.意识到这解决了我的问题. (2认同)
这是一个完美的例子，为什么最高票数的答案应该出现在接受的答案之上。 (2认同)

Answer 2

我遇到了同样的问题,运作良好:

.element { display: block; line-height: 1.2; }

Answer 3

在 IE 8-11、Firefox 38.0.1 和 Chrome 43 中进行测试后，行为是相同的：内联元素具有不会低于的最小行高。看来这个最小高度来自CSS 规范：

在内容由内联级元素组成的块容器元素上，“line-height”指定元素内行框的最小高度。最小高度由基线上方的最小高度和基线下方的最小深度组成，就像每个行框都以具有元素字体和行高属性的零宽度行内框开头。我们称这个想象中的盒子为“支柱”。

如果您想保留内联元素的一些优点，可以使用display: inline-block. 您也可以使用display: block. 两者都允许您在我测试的所有浏览器中设置您想要的行高。

两个相关问题供更多阅读：

Answer 4

行高是相对于字体大小而言的，除非声明负边距，否则不能低于该高度。