如何确定块和内联元素的内容框的高度

Question

我认为'是什么决定了内容框的高度'并且认为行高可能。 似乎是这种情况，您可以为具有 line-height 的块元素确定它。

<p style="background-color: grey; font-size: 16px; line-height: 2em;">Is line-height same as height of p tag?</p>
<div style="background-color: lightsalmon; font-size: 16px; line-height: 2em;">Is line-height same as height of div tag?</div>
<span style="background-color: aquamarine; font-size: 16px; line-height: 2em;">Is line-height same as height of span tag?</span>

内联元素似乎是另一回事。有人能详细说明吗？

Answer 1

对于块元素来说这很容易，但你需要区分两种不同的情况。当我们有 IFC（内联格式化上下文）或 BFC（块格式化上下文）时。从the specification你可以阅读

如果 'height' 是 'auto'，高度取决于元素是否有任何块级子元素以及是否有填充或边框：

元素的高度是从其顶部内容边缘到以下第一个适用的距离：

1. 最后一行框的底边，如果该框建立了带有一行或多行的行格式上下文
2. 如果子元素的下边距不与元素的下边距一起折叠，则它的最后一个流入子元素的底部（可能折叠）边距的底部边缘
3. 上边距不与元素下边距折叠的最后一个流入子项的下边框边缘
4. 零，否则

仅考虑正常流程中的子项（即忽略浮动框和绝对定位框，考虑相对定位框而不考虑它们的偏移量）

如果我们考虑一个 IFC，那么线框将定义我们的高度，就像您的示例一样，在 div 和 p 中，您有一个由 line-height 定义的线框。

如果我们考虑 BFC，则 (2) 和 (3) 适用。在这里，您可以将其视为递归定义，因为拥有 BFC 意味着我们内部还有其他块，并且这些块将遵循相同的规则（BFC 或 IFC 等）。另外，我们考虑了margin collapsing规则来得到最终的高度。

如果块为空，则为零。

当然，这里考虑height:auto 的情况。如果你明确地设置一个高度，那么它是微不足道的。

---

内联元素可以参考the specification的这一部分：

“高度”属性不适用。内容区域的高度应该以字体为准，但本规范没有具体说明如何。例如，UA 可以使用 em-box 或字体的最大升序和降序。 （后者将确保部分高于或低于 em-box 的字形仍在内容区域内，但会导致不同字体的不同大小的框；前者将确保作者可以控制相对于“行高”的背景样式，但会导致字形在其内容区域之外绘制。）

这里有点棘手，但规则很简单：您无法控制或设置内容区域的高度。只有您将使用的字体属性才能定义最终高度。

您还应该注意，内容区域与行框不同。

内联非替换框的垂直内边距、边框和边距从内容区域的顶部和底部开始，与“行高”无关。但是在计算 line box 的高度时只使用了 'line-height'。

<span style="background-color: aquamarine; font-size: 16px; line-height: 2em;">Is line-height same as height of span tag?</span>
<br>
<span style="background-color: aquamarine; font-size: 16px; line-height: 4em;">Is line-height same as height of span tag?</span>
<br>
<span style="background-color: aquamarine; font-size: 16px; line-height: 8em;">Is line-height same as height of span tag?</span>

如果你增加行高，你会清楚地注意到背景不会覆盖更大的区域，而只有行框会更大

一些相关问题以获得更多细节并了解行框和内容区域之间的区别：

Can specific text character change the line height?

Box Model for Inline Elements

Why is there space between line boxes, not due to half leading?

---

所以 line-height 确实会定义块元素的高度而不是内联元素，因为块元素的高度将取决于行框的高度，而行框的高度由line-height¹

下面是一个例子，它显示了一个块元素的高度由行框定义，而内联元素的内容区域将溢出，因为它们在定义行框时没有任何作用：

p {
  margin:50px;
  font-size:35px;
  border:1px solid red;
  line-height:0;
}

span {
  background:green;
  line-height:10px;
}

<p>
 <span>some text here and there</span>
</p>

<p>
 <span style="font-family:cursive">some text here and there</span>
</p>

在这两个示例中，p 的高度等于 12px（行高 10 像素 + 边框高度 2 像素），并且我们的内联元素在每种情况下都有不同的高度，因为字体不是一样。

---

¹：我们应该注意到，在实践中它可能更复杂，仅 line-height 的值是不够的。

如果我们阅读规范，我们可以看到：

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

然后

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

这就是为什么在上一个示例中我将块元素的line-height 设为 0，因此只有内部内联元素的line-height 将定义行框的最终高度

即使是垂直对齐也在这里起作用，因为如果我们有多个元素以不同的方式对齐并且具有不同的line-height，则查找结果将更加复杂：

p {
  margin:50px;
  font-size:35px;
  border:1px solid red;
  line-height:0;
}

span {
  background:green;
  line-height:1;
}

<p>
 <span>AB</span> <span >AB</span>
</p>


<p>
 <span>AB</span> <span style="vertical-align:super">AB</span>
</p>

要找到 linebox 的高度，您需要考虑 3 个因素：

1. 块容器（IFC）的行高
2. 内联元素的行高
3. 内联元素的垂直对齐方式

我们不要忘记line-height 是继承的，所以如果我们不明确设置它，我们需要考虑父元素的值或默认值。