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

Posted 2023-03-16

【中文标题】为啥 CSS 属性 \'line-height\' 不能让我在 Chrome 中创建紧凑的行间距？

【英文标题】：Why isn't the CSS property 'line-height' letting me make tight line-spaces in Chrome?为什么 CSS 属性 'line-height' 不能让我在 Chrome 中创建紧凑的行间距？

【发布时间】：2011-11-17 12:00:30

【问题描述】：

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

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

【问题讨论】：

你有没有试过像line-height: 0.75em这样的东西对我来说很好。

同意，mhenry 的回答绝对值得在这方面获胜。

【参考方案1】：

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

【讨论】：

False，你可以设置line-height: 0.5，你的文字会重叠。您甚至可以将其设置为0。

【参考方案2】：

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

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

【讨论】：

正确。例如，如果您有span，将其设置为display:block 可以解决此问题。虽然我想知道这是否是 html5 标准的预期功能。这对我来说似乎很乱。

这应该是认可的答案。意识到这一点解决了我的问题。

太糟糕了，我想要一个更紧凑的行高，同时保持display:inline 和 HTML5。可能还有其他想法吗？

display: inline-block; 至少在 Chrome 上也可以工作，并保留了 display: inline; 和 display: block; 的优点，包括此功能。

这是一个完美的例子，为什么投票数最多的答案应该出现在接受的答案之上。

【参考方案3】：

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

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

【参考方案4】：

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

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

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

两个相关问题需要更多阅读：

why the span's line-height is useless

The browser seems to have a minimum line-height on this block that contains text. Why?