minimum - 为什么 CSS 属性 'line-height' 不能让我在 Chrome 中创建紧凑的行间距？

Question

我有一个段落标签，我在其他地方定义了一个 15px 的行高，我在页面下方有另一个段落标签，我想让行高在 10px 左右。有趣的是，它不会让我降低到 10px 或任何比这更小的值，但是当我将它设置为 25px 或更高时，line-height 属性似乎正在工作。

我通过 Chrome 浏览器的 Web 开发工具（Chrome 版本的 Firefox 的 Firebug）检查了相关的 CSS（全部是手工编码），但找不到任何相关的东西。是否有一个常见的 CSS 错误阻止我将行高缩小到某个最小值以上？

score 75 · Accepted Answer

我在 Firefox 和 Chrome 中都注意到，如果您设置 HTML5 文档类型，则内联元素的最小行高。对于块元素，您可以将 line-height 设置为您想要的任何内容，甚至可以使线条重叠。

如果您不设置 HTML5 文档类型，则块或内联元素没有最小行高。

score 28 · Accepted Answer

28

我遇到了同样的问题，工作得很好：

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

于 2013-03-07T23:52:35.547 回答

score 3 · Accepted Answer

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

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

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

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

score -11 · Accepted Answer

-11

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

于 2011-09-15T01:40:27.953 回答

4 回答 4