浏览器似乎在此块上包含文本的最小行高。为什么？

Question

我希望我可以将块元素的行高设置为零，然后该元素中的每个行框将仅根据其内容的行高来对齐。但是，当我尝试在这些内联元素上使用非常小的字体时，它们似乎与行中内容所需的基线不一致。我对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'指定在计算行框高度时使用的高度。

我知道，对于一个简单的例子，有很多方法可以破解小文本的位置，并让它最终位于包含块的顶部，但我真的很想了解其实际原因文本正在排队。

Answer 1

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

，也可以使用vertical-align: top;

演示：

输出：

  

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;
}

Answer 2

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

strut（每个行块开头的虚构字符，包含父元素＆＃39; s font-size和line-height）并不指定顶部和底部对于该行的边缘，它也有自己的基线。 （在CSS3中它实际上有一堆基线，但是现在我们可以专注于＆＃34;字母＆＃34;一个。）strut的基线定位使得在父元素中呈现的字符＆＃39 ; s字体最终会在支柱的顶部和底部之间。在线高为零的特殊情况下，支柱的顶部和底部是相同的线，但它的基线实际上低于其底边。支柱的基线，如其底边，定义了线的最小值：它可以向下移动，但从不向上移动。这意味着当我们在跨度中渲染一个小得多的字体时，它会使用一个基线，将div的字体置于div的上边缘。