Why a div with an empty inline-block has height?

Question

div {
 background:red;
} 

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

The w3c send

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

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

I am confused?

Answer 1

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

Not 100% correct because if the span has at least one character the height will be different from 0. Even an invisible zero width space:

div {
  background: red;
}

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

In case of an empty span (having display:inline) the browser will generate 0 line box. So inside your div there is no line box thus you have a height equal to 0.

Adding one character will trigger the creating of one line box and the rule you quoted will be used and the line-height will define the height of the line box and the height of a div is the height of its line box (since we only have one).

Same logic if you add an empty inline-block element. Even empty, an inline-block will trigger the creation of a line box.

Same logic if you use an empty img:

div {
  background: red;
}

<div><img></div>

To use easy words, an inline-block element is still considered as an existing element and we need to generate a line box to hold it. An empty inline element will be considered by the browser as a non-existing element so we don't need any line box to hold something that doesn't really exist.

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