如何确定块和内联元素的内容框的高度 [英] How to determine height of content-box of a block and inline element

问题描述

我认为什么决定了内容框的高度"而认为行高可能如此. 似乎可以为具有行高的块元素确定它.

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

内联元素似乎是一个不同的故事.有人可以详细说明吗?

解决方案

对于块元素来说，这很容易，但是您需要区分两种不同的情况.当我们拥有IFC(内联格式设置上下文)或BFC(块格式设置上下文)时.从规范中可以阅读

如果"height"为"auto" ，则高度取决于元素是否具有任何块级子元素以及是否具有填充或边框:

元素的高度是从其主要内容边缘到以下第一个适用元素的距离:

1. 最后一个行框的底边，如果该框建立了具有一行或多行的i nline格式上下文
2. 最后一个流入子项的底边距(可能已折叠)的底边，如果子项的底边距不随元素的底边距而折叠
3. 最后一个流入子项的底边界边缘，其上边距不随元素的下边距塌陷
4. 零，否则

仅考虑正常流程中的子项(即，忽略浮动框和绝对定位的框，并认为相对定位的框没有偏移)

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

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

如果该块为空，则为零.

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

---

对于内联元素，您可以参考规格:

高度"属性不适用.内容区域的高度应基于字体，，但是此规范未指定操作方式. UA可以例如使用字体的em-box或最大升序和降序. (后者将确保在em-box上方或下方具有部分文字的字形仍位于内容区域内，但导致不同字体的大小不同的box；前者将确保作者可以控制相对于'line-height'的背景样式. ，但导致字形在其内容区域之外绘画.)

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

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

内联不可替换框的垂直填充，边框和边距从内容区域的顶部和底部开始，与行高"无关.但是在计算线框的高度时仅使用"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> 

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

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

特定文本字符可以更改行高吗?

内联元素的框模型

为什么线盒之间有间距，而不是由于一半的引线间距?

---

所以line-height实际上将定义块元素的高度，而不是内联元素，因为块元素的高度将取决于线盒的高度，并且线盒的高度由line-height ^{1 <定义/sup>}

在此示例显示了一个块元素，其高度由线框定义，并且内部的内联元素的内容区域将溢出，因为它们在定义线框时不起作用:

 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(line-height的10px + border的2px)，并且inline元素在每种情况下都具有不同的高度，因为字体不是一样.

---

¹ :我们应该注意，实际上它可能更复杂，仅靠行高的值是不够的.

如果我们阅读规格说明，可以看到:

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

然后

在不可替换的内联元素上，line-height指定在计算线框高度时使用的高度.

这就是为什么在上一个示例中，我将block元素的line-height设置为0，所以只有内部inline元素的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> 

要找到线框的高度，您需要考虑以下三个因素:

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

让我们不要忘记line-height是继承的，因此，如果我们未明确设置它，则需要考虑父元素的值或默认元素.

I thought 'what determines height of content-box' and thought line-height might. It seems to be the case you can determine it for block elements with 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>

Inline elements seems a different story. Would someone be able to elaborate?

解决方案

For block elements its quite easy but you need to distinguish between two different cases. When we have an IFC (inline formatting context) or BFC (block formatting context). From the specification you can read

If 'height' is 'auto', the height depends on whether the element has any block-level children and whether it has padding or borders:

The element's height is the distance from its top content edge to the first applicable of the following:

1. the bottom edge of the last line box, if the box establishes a inline formatting context with one or more lines
2. the bottom edge of the bottom (possibly collapsed) margin of its last in-flow child, if the child's bottom margin does not collapse with the element's bottom margin
3. the bottom border edge of the last in-flow child whose top margin doesn't collapse with the element's bottom margin
4. zero, otherwise

Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset)

If we consider an IFC then the line boxes will define our height exactly like your examples where in the div and p you have one line box defined by the line-height.

If we consider a BFC then the (2) and (3) apply. Here, you can see it as a recursive definition because having a BFC means we have other blocks inside and those blocks will follow the same rules (either BFC or IFC and so on). In addition, we consider the margin collapsing rules to get the final height.

If the block is empty then it's zero.

Of course, this consider the case of height:auto. If you explicitely set a height then it's trivial.

---

For inline elements you can refer to this part of the specification:

The 'height' property does not apply. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the 'line-height', but leads to glyphs painting outside their content area.)

Here is a bit tricky but the rule is simple: you cannot control or set the height of the content area. Only the font properties you will be using will define the final height.

You should also note that the content area is different from the line box.

The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, and has nothing to do with the 'line-height'. But only the 'line-height' is used when calculating the height of the line 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>

If you increase the line-height you will clearly notice that the background won't cover a bigger area but only the line box will be bigger

Some related question to get more details and understand the difference between line box and content area:

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?

---

So line-height will indeed define the height of block element and not inline element since the block element height will depend on the height of the line boxes and the height of line boxes are defined with line-height¹

Here is an example to show a block element having its height defined by the line box and the content area of the inline element inside will oveflow because they play no role in defining the line boxes:

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>

In both examples, we have a height equal to 12px for the p (10px of line-height + 2px of border) and our inline element is having a different height in each case because the font is not the same.

---

¹: We should note that in practise it can be more complex and the value of line-height alone isn't enough.

If we read the specficiation we can see that:

On a block container element whose content is composed of inline-level elements, line-height specifies the minimal height of line boxes within the element.

Then

On a non-replaced inline element, line-height specifies the height that is used in the calculation of the line box height.

That's why in the last example I made the line-height of the block element to be 0 so only the line-height of the inline elements inside will define the final height of the linebox

Even the vertical alignment play a role here because if we have multiple elements not aligned the same way and with different line-height, finding the result will be more complex:

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>

To find the height of a linebox you need to consider 3 factors:

1. The line-height of the block container (the IFC)
2. The line-height of the inline elements inside
3. the vertical alignment of inline elements

Let's not forget that line-height is inherited so if we don't set it explicitely we need to either consider the value of the parent element or the default one.

这篇关于如何确定块和内联元素的内容框的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！