了解有关内联级别盒高度的CSS2.1规范

Question

CSS2.1第10.6.1节规定：

内容区域的高度应基于字体，但是此 规范未指定 。UA可以例如使用字体的em-box或最大升序和降序。

内联不可替换框的垂直填充，边框和边距从内容区域的顶部和底部开始， 与 “ line-
height”

无关 。

然后，在10.8行高计算中遵循似乎矛盾的语句：

线框的高度确定如下：

1. 计算行框中每个行 内框 的高度。 对于嵌入式盒，这是它们的 “行高” …。

和：

用户代理必须通过其相关基准使未替换的嵌入式框中的字形彼此对齐…。

内联框的高度将所有字形及其两边的前导部分包围起来， 因此正好是行高”

在这里，我有些不完全了解。

内联级别框 的高度等于line-height它们上设置的属性（最小是line-height在父 块html" target="_blank">容器元素
上设置的属性），还是仅由字体高度（和UA实现）确定？

编辑

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

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

编辑：

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

我意识到它 实际上并不 矛盾，我只是试图理解它的含义（鉴于其措辞）。

Answer 1

内联级别框的高度是否等于其上设置的line-height属性（最小值是在父块容器元素上设置的line-height），

是的。

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

不，不是

CSS实际上是关于盒子的，而不是元素的，并且您应该尽量不要混淆两者。

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

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

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

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

每个行框都由该行框包含的最上面的内嵌框的顶部和最下面的内嵌框的底部限制。

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

假设我们有一个包含块的简单情况，它只包含一个简短的内联元素（即足够短，以至于它适合单个行框）。 还假设一切都在基线上对齐。假设在包含框上将line-
height设置为20px，并且inline元素继承了该高度。还假设包含块的字体大小（em-
square）为16px，这意味着字体度量计算得出的上升（基线以上）为14px，下降（基线以下）为4px。

因此，支撑的内容区域高（14px + 4px =）18px。
行高为20像素，因此领先2像素，在上升上方1像素，在下降下方1像素。因此，撑杆的线高由基线上方的15px和基线下方的5px组成。

现在，假设inline元素的font-size设置为0.5em（即包含块的一半）。内联元素的内容区域将是7px的上升和2px的下降。行高仍为20px，因此行距为20px-（7px+2px）=11px，这意味着5.5px在上升上方，而5.5px在下降下方。这导致内联元素的行高由基线上方12.5px和基线下方7.5px组成。

由于strut和inline元素垂直于基线对齐，因此，最上面的inline框（strut）的顶部比基线高15px，最下面的inline框（inline元素）的底部比基线低7.5px，则线框的实际高度不是20px，而是（15px + 7.5px =）22.5px。