浏览器似乎在这个包含文本的块上有一个最小行高。为什么？答案

【问题标题】：The browser seems to have a minimum line-height on this block that contains text. Why?浏览器似乎在这个包含文本的块上有一个最小行高。为什么？
【发布时间】：2013-02-03 09:53:54
【问题描述】：

我希望我可以将块元素的行高设置为零，然后该元素内的每个行框将仅根据其内容的行高对齐。但是，当我尝试在这些内联元素上使用非常小的字体时，它们似乎与低于行中内容所需的基线对齐。我对 CSS 规范的理解与所有浏览器呈现的内容不一致。我有什么问题？

一个简单演示的代码如下所示（它也在fiddle 中）：

body {
    font-size:60px;
}
div {
    height:3em;
    width:8em;
    border:1px solid black;
    line-height:0; /* minimum line height for contained elements */
}
span {
    line-height:normal; /* don't inherit from containing block */
    background-color: #cff; /* so we can see positioning */
}
<div><span>Big text works</span></div>
<div><span style="font-size:.5em">Half text size works fine too</span></div>
<div><span style="font-size:.2em">Very small text doesn't align with the top of the containing box. Why does this happen?</span></div>

根据CSS spec：

在内容由行内元素组成的块容器元素上，'line-height' 指定元素内行框的最小高度。

在不可替换的内联元素上，'line-height' 指定用于计算行框高度的高度。

我知道对于一个简单的例子，比如有很多方法可以破解小文本的位置并让它最终出现在包含块的顶部，但我真的很想了解真正的原因文本是按原样排列的。

【问题讨论】：

标签： html css

【解决方案1】：

这是因为<spans> 默认为display: inline;，并且内联元素的line-height 不能小于其父元素。您可以将显示类型更改为block，它将起作用。如果还设置了vertical-align: top;，也可以使用inline-block。

演示：

输出：

HTML：

<div><span style="font-size:.2em">"display: inline;" doesn't work</span></div>
<div><span id="block" style="font-size:.2em">"display: block;" works</span></div>
<div><span id="inline-block" style="font-size:.2em">"display: inline-block;" also works if you set "vertical-align: top;"</span></div>

CSS：

body {
    font-size:60px;
}
div {
    height:50px;
    width:400px;
    border:1px solid black;
    line-height:0; /* minimum line height for contained elements */
}
span {
    line-height:normal; /* don't inherit from containing block */
    background-color: #cff; /* so we can see positioning */
}
#block {
    display: block;
}
#inline-block {
    display: inline-block;
    vertical-align: top;
}

【讨论】：

这个最小行高是否记录在任何地方？它的依据是什么？父元素的字体大小？对于我正在处理的特定项目，我不能使用 display:block 因为我将几个跨度并排排列在一起，并且我不能使用 vertical-align:top 因为这几个跨度有时会有所不同字体大小。
@sethobrien 我将在这篇文章中更详细地介绍一些其他示例：stackoverflow.com/questions/8964281/…。这是一个略有不同的主题，但最终结果是相同的。它基于跨度本身的字体。我刚试过vertical-align: middle;，它也可以。您也许可以使其与您的布局一起使用。
感谢您的链接。在您的示例中，如规范所述，跨度上的最小行高与包含 div 的行高匹配。如果你让包含的 div 的 line-height 更小，那么 span 可以像我们期望的那样以小的 line-height 呈现，如forked fiddle 所示。 vertical-align:middle 工作非常有趣，但我确实依赖于不同文本大小的 span 的基线对齐。
@sethobrien 所以如果我理解你在这里说的话，父容器（如果它是 block 并且子容器是 inline）line-height 会覆盖子容器？
@sethobrien 进一步的测试表明。如果孩子是inline，它的line-height 不能小于父母，否则会被忽略。不过，它可以更大，然后它很荣幸。这是一个我经常想知道的谜题。

【解决方案2】：

事实证明，我看到的行为与我假设的最低 line-height 无关。问题在于基线对齐，因为跨度有vertical-align:baseline。如果跨度有一个不同的vertical-align，例如bottom，它不依赖于其父级的基线，它将向上移动到包含 div 的顶部，我期望它在。

strut（位于每个行块开头并具有父元素的font-size 和line-height 的虚构字符）不仅指定行的顶部和底部边缘，它还具有基线它自己的。（在 CSS3 中它实际上有一堆基线，但现在我们可以只关注“字母”基线。）strut 的基线被定位，以便在父元素的字体中呈现的字符最终会位于顶部和底部之间的中间。支柱。在这种行高为零的特殊情况下，支柱的顶部和底部是同一条线，但它的基线实际上低于其底部边缘。支柱的基线，就像它的底边一样，定义了线的最小值：它可以向下移动，但不能向上移动。这意味着当我们在 span 中渲染小得多的字体时，它使用的基线将使 div 的字体在 div 的顶部边缘居中。

【讨论】：