Question

我有一个段落标记，我在其他地方定义了一个15px的行高，我在页面的下方还有另一个段落标记，我想让行高达10px左右。有趣的是，它不会让我降到10px或更小的东西，但是当我将它设置为25px或更高时，行高属性似乎正在起作用。

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

Answer 1

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

如果您没有设置HTML5 doctype，则块或内联元素没有最小行高。

Answer 2

我遇到了同样的问题，运作良好：

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

Answer 3

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

在块容器元素上，其内容由内联级元素组成，＆＃39; line-height＆＃39;指定元素中线框的最小高度。最小高度包括基线上方的最小高度和其下方的最小深度，就像每个线框以零宽度内联框开头一样，具有元素的字体和线高属性。我们把那个想象中的盒子称为＆＃34; strut。＆＃34;

如果您想保留内联元素的一些好处，可以使用display: inline-block。您也可以使用display: block。两者都允许您在我测试的所有浏览器中创建任何您想要的行高。

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

Answer 4

行高是相对于font-size的，除非你声明负边距，否则你不能低于它。