为什么 CSS 属性'line-height'不允许我在 Chrome 中创建紧凑的行距?



我有一个段落标签,我在其他地方定义的行高为15px,我有另一个段落标签,我想让行高在10px左右。有趣的是,它不会让我降低到10px或更小,但当我设置它为25px或更高,line-height属性似乎工作。

我通过Chrome浏览器的web开发工具(Chrome版本的Firefox的Firebug)检查了相关的CSS(都是手工编写的),但没有找到任何相关的内容。是否有一个常见的CSS错误,阻止我缩小行高超过一定的最小量?

我注意到在Firefox和Chrome中,如果你设置HTML5文档类型,就会有内联元素的最小行高。对于块元素,你可以设置任何你想要的行高,甚至使线条重叠。

如果你没有设置HTML5的文档类型,没有最小行高的块或内联元素

我遇到了同样的问题,使用

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

在ie8 -11, Firefox 38.0.1和Chrome 43中测试后,行为是相同的:内联元素有一个最小行高,它们不会低于。这个最小高度似乎来自CSS规范:

对于内容由行内元素组成的块容器元素,'line-height'指定元素内行框的最小高度。最小高度由基线之上的最小高度和基线之下的最小深度组成,就好像每个行框都以具有元素的字体和行高属性的零宽度行内框开始一样。我们称这个想象的盒子为"strut"。"

如果你想保持内联元素的一些好处,你可以使用display: inline-block。你也可以用display: block。它们都允许你在我测试的所有浏览器中任意设置行高。

两个相关的问题供更多阅读:

为什么span's line-height没用

浏览器似乎在包含文本的块上设置了最小行高。为什么?

line-height是相对于font-size而言的,除非你声明了负边距,否则不能低于这个值。

最新更新