Why don't containers expand to fit their inline elements

Question

I simply have a container like a div or a button which contains an inline element with padding - the container doesn't grow to fit the inline element.

button, div {
  background: blue;
}

span {
  background: orange;
  /*display: inline-block; */ /* toggle to see container element grow */
  padding: 4em;
}

hr {
  margin:100px;
}

<div>
    <span class="btn__content">
        I'm div inline content
    </span>
</div>

<hr>

<button class="btn" type="button">
    <span>
        I'm button inline content
    </span>
</button>

Why does this happen?

NB: I'm not looking for a fix - (for instance, I already know that I could display:flex on the container and that would make the container expand to the content)

Rather, I'm looking for an explanation from a credible source like the spec which explains this behavior of inline elements.

Answer 1

I believe it's because of these two sections:

• 9.4.2 Inline formatting contexts

  The height of a line box is determined by the rules given in the section on line height calculations.

• 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

  The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'.

Setting a line-height does change the height of the containing box

button, div {
  background: blue;
}

span {
  background: orange;
  /*display: inline-block; */ /* toggle to see container element grow */
  padding: 4em;
  line-height: 8em;
}

hr {
  margin:100px;
}

<div>
    <span class="btn__content">
        I'm div inline content
    </span>
</div>

<hr>

<button class="btn" type="button">
    <span>
        I'm button inline content
    </span>
</button>

Answer 2

The reason is explained in the Visual Formatting model documentation (emphasis mine):

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

The width of a line box is determined by a containing block and the presence of floats. The height of a line box is determined by the rules given in the section on line height calculations.

The line height is then calculated as:

The height of a line box is determined as follows:

1. The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'. (See "Calculating heights and margins" and the height of inline boxes in "Leading and half-leading".)
2. The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline.
3. The line box height is the distance between the uppermost box top and the lowermost box bottom. Empty inline elements generate empty inline boxes, but these boxes still have margins, padding, borders and a line height, and thus influence these calculations just like elements with content.

And as MDN notes about the box model:

Note that, for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the line-height property, even though the border and padding appear visually around the content.

and reiterated by the W3 for inline non-replaced elements:

The 'height' property doesn't apply, but the height of the box is given by the 'line-height' property.

https://www.w3.org/TR/REC-CSS2/visudet.html#q15

Where the line height is "the height that is used to calculate line box height." So while padding or borders might give the look of height to an inline element, only the line-height property will affect parent nodes. As you can see in the example below, the line height on the spans is affecting the height of the parent div.

button,
div {
  background: blue;
}

span {
  background: orange;
  line-height: 10em;
}

hr {
  margin: 100px;
}

<div>
  <span class="btn__content">
        I'm div inline content
    </span>
</div>

<hr>

<button class="btn" type="button">
    <span>
        I'm button inline content
    </span>
</button>

See also Inline elements and line-height