时间戳

首页 > 解决方案 > 如何确定块和内联元素的内容框的高度

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

问题描述

我想'是什么决定了内容框的高度'并且认为行高可能。您似乎可以为具有行高的块元素确定它。

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

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

标签： htmlcss

解决方案

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

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

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

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

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

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

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

如果块为空，则为零。

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

对于内联元素，您可以参考规范的这一部分：

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

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

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

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

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

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

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

特定的文本字符可以改变行高吗？

内联元素的盒子模型

为什么行框之间有空格，而不是由于一半领先？

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

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

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>

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

1：我们应该注意，在实践中它可能更复杂，仅 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>

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

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

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

推荐阅读