3

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

一个简单演示的代码如下所示（它也很麻烦）：

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 规范：

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

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

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

4

2 回答 2

6

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

演示： jsFiddle

输出：

在此处输入图像描述

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;
}
于 2013-02-18T21:29:32.750 回答
1

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

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

于 2013-02-19T18:29:43.047 回答