了解有关内联框高度的 CSS2.1 规范

Question

CSS2.1 Section 10.6.1 指定：

内容区域的高度应该以字体为准，但是这个规范没有具体说明如何。例如，UA 可以使用 em-box 或字体的最大升序和降序。

内联非替换框的垂直内边距、边框和边距从内容区域的顶部和底部开始，与'line-height'无关。

然后，看似矛盾的陈述出现在10.8 Line height calculations：

一个line box的高度是这样确定的：

1. 计算行框中每个行内级框的高度。 对于内联框，这是他们的'line-height'....

还有：

用户代理必须通过相关基线将非替换内联框中的字形相互对齐....

内联框的高度包含所有字形及其每边的半前导，因此正好是'line-height'

这里有些东西我没有完全理解。

内联框的高度是否等于设置在它们上的line-height属性（最小值是设置在父块容器元素上的line-height)，还是仅由字体高度（和 UA 实现）决定？

---

编辑

只是为了避免混淆（因为有很多关于此的帖子）：

• 我知道inline-level element 的内容高度等于它包含的字体（以及 UA 实现）
• 我意识到规范确实在10.6.1 中声明，但在10.8.1 它声明inline-level box 的高度等于它的line-height
• 这对我来说似乎很矛盾
• 我写这篇文章的目的是讨论规范中的措辞，以便充分理解它的含义以及它如何与现实联系起来

---

编辑：

为了避免“基于意见”的近距离投票，我更改了标题。规范自相矛盾不是我的意见，是否自相矛盾也不是在征求其他人的意见。

我意识到它实际上并不矛盾，我只是想了解它的措辞为什么不矛盾。

Answer 1

inline-level box 的高度是否等于其上设置的 line-height 属性（最小值为父块容器元素上设置的 line-height），

是的。

还是仅由字体高度（和 UA 实现）决定？

不是的

CSS 真的是关于盒子，而不是元素，你应该尽量不要混淆这两者。

因此，一个内联元素与许多框相关联。内容框、填充框、边框框和边距框。它也有零个（如果display:none）、一个或多个内联框。内容框、内边距、边框和边距可以在内联框之间划分，以便内联内容可以分布在多于一行上。

内联框的高度是由leading调整的内容高度。领导在这里发挥了魔力。前导定义为元素的行高减去该行内框的内容高度。

简单地重新排列该等式告诉我们，内联框的高度仅取决于行高，而不取决于内容框（或填充、边框、边距框）。

请注意，以上都没有讨论线框，这又是另一回事，不是内联元素或其框的直接属性。行框是通过排列出现在同一行上的行内框来构造的，这样它们的垂直对齐方式符合为元素计算的规则，包括由支柱形成的零宽度行内框。

每个行框由最上面的行内框的顶部和该行框所包含的最下面的行内框的底部界定。

---

题外话：为什么线框的高度会让人吃惊。

假设我们有一个包含块的简单案例，它只包含一个短的内联元素（即足够短，可以放在一个单行框中）。还假设一切都在基线上对齐。假设包含框的 line-height 设置为 20px，并且 inline 元素继承了它。还假设包含块的字体大小（em-square）为 16 像素，这意味着字体度量计算为 14 像素的上升（基线以上）和 4 像素的下降（基线以下）。 em>

所以支柱的内容区域是 (14px + 4px =) 18px 高。 line-height 是 20px，所以有 2px 领先，1px 在上升之上，1px 在下降之下。所以支柱的行高是由基线上方 15px 和基线下方 5px 组成。

现在，假设内联元素的字体大小设置为 0.5em（即包含块的一半）。内联元素的内容区域将是 7px 的上升和 2px 的下降。 line-height 仍然是 20px，所以前导是 20px - (7px + 2px) = 11px，这意味着 5.5px 在上升之上，5.5px 在下降之下。这导致内联元素的行高由基线上方 12.5 像素和基线下方 7.5 像素组成。

由于 strut 和 inline 元素与它们的基线垂直对齐，因此最上面的 inline box（strut）的顶部在基线上方 15px 和最下面的 inline box（inline 元素）的底部比baseline低7.5px，line box的实际高度不是20px而是(15px + 7.5px =) 22.5px。

Answer 2

正如我在上一个问题 (Why is there space between line boxes, not due to half leading?) 中解释的那样，我们有 内容区域 和 行框。

内容区域由字体属性和 UA 定义（如您的第一个引用中所述），行框由 line-height 定义（如您的第二个引用中所述）。下面举个例子，根据不同的字体显示不同的内容区域高度，并用行框来说明区别：

span {
  border-left: 1em solid red;
  background: rgba(255, 0, 0, 0.2);
}

.container>div {
  margin-bottom: 5px;
  border: 1px solid;
  line-height: 30px;
}

.container>div:nth-of-type(1) span{
  font-family: arial;
  font-size: 25px;
}

.container>div:nth-of-type(2) span{
  font-family: "open sans";
  font-size: 20px;
}

.container>div:nth-of-type(3) span{
  font-family: monospace;
  font-size: 30px;
}

.container>div:nth-of-type(4) span{
  font-family: cursive;
  font-size: 22px;
}

<div class="container">
  <div>
    <span>Hello World</span>
  </div>
  <div>
    <span>Hello World</span>
  </div>
  <div>
    <span>Hello World</span>
  </div>
  <div>
    <span>Hello World</span>
  </div>
</div>

如您所见，背景和边框适用于由font-family 和font-size 定义的内容区域。对于所有情况，我将line-height 设置为等于30px，因此所有行框都是相等的。

我们还可以注意到 border-left 的行为不同，这表明内容区域的高度确实取决于字体和 UA。

---

这是一个带有一些垂直填充/边距/边框的相同示例，以说明它们如何影响内容区域，与line-height无关：

span {
  border-left: 1em solid red;
  background: rgba(255, 0, 0, 0.2);
  font-family: arial;
  font-size: 25px;
}

.container>div {
  margin-bottom: 5px;
  border: 1px solid;
  line-height: 40px;
}

.container>div:nth-of-type(1) span {
  padding: 10px;
}

.container>div:nth-of-type(2) span {
  border-bottom: 5px solid red;
}

.container>div:nth-of-type(3) span {
  padding: 10px;
  background-clip: content-box;/*I limit the background to content-box only*/
}

.container>div:nth-of-type(4) span {
  margin: 20px;
}

<div class="container">
  <div>
    <span>Hello World</span>
  </div>
  <div>
    <span>Hello World</span>
  </div>
  <div>
    <span>Hello World</span>
  </div>
  <div>
    <span>Hello World</span>
  </div>
</div>