html - 为什么带有空行内 block 的 div 具有高度？

Question

div {
 background:red;
} 

<div><span style="display: inline-block"></span></div>

w3c 发送

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. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut." (The name is inspired by TeX.).

https://www.w3.org/TR/CSS2/visudet.html#inline-box-height
但是当跨度显示为“内联”时，为什么 div 的高度为 0？
我很迷惑？

Answer 1

But when the span display is 'inline', why the div's height are 0?

不是 100% 正确，因为如果跨度至少有一个字符，则高度将与 0 不同。即使是一个不可见的零宽度空间:

div {
  background: red;
}

<div><span>​</span></div>

如果跨度为空(具有 display:inline )，浏览器将生成 0 行框。所以在你的 div 中没有行框，因此你的高度等于 0。
添加一个字符将触发创建一个行框，并使用您引用的规则和 line-height将定义行框的高度，一个 div 的高度是它的行框的高度(因为我们只有一个)。
如果您添加一个空 inline-block，则逻辑相同元素。即使是空的，inline-block 也会触发 line box 的创建。
如果您使用空 img，则逻辑相同:

div {
  background: red;
}

<div><img></div>

要使用简单的词，一个 inline-block element 仍然被认为是一个现有的元素，我们需要生成一个 line box 来保存它。一个空的内联元素会被浏览器认为是一个不存在的元素，所以我们不需要任何行框来保存实际上并不存在的东西。

Line boxes are created as needed to hold inline-level content within an inline formatting context. Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose. ^ref