Question

I’m trying to understand block container boxes as described in the CSS2.1 spec, but I’m having a tough go of it. The spec doesn’t really provide a definition. They just say that:

A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes.

Also according to the spec, all non-replaced block-level boxes (except table boxes) are block containers boxes. Thus, body, div, p, etc. are all block containers boxes.

Under anonymous block boxes:

If a block container box has a block-level box inside it, then we force it to have only block-level boxes inside it.

Thus, in the example:

<div>
  Some text
  <p>More text</p>
</div>

“Some text” is in an anonymous block box.

OK, that works, but when I try this example:

<div>
  <p>Some text</p>
  <em>Emphasized text</em>
  <em>More emphasized text</em>
  More regular text.
</div>

It displays as:

  Some text.

  _Emphasized text_ _More emphasized text_ More regular text.

Whereas I would have expected

  Some text.

  _Emphasized text_

  _More emphasized text_

  More regular text.

In other words, the em elements and the anonymous fragment (“More regular text”) are behaving as inline-level boxes, apparently contradicting the statement “If a block container box has a block-level box inside it, then we force it to have only block-level boxes inside it.” It also contradicts the statement that block containers can only have all block-level boxes or all inline-level boxes, because the “Some text” in the paragraph element is behaving as a block-level box.

What am I missing here?

Answer 1

<p> is already a block level element, so it treats it as such. Everything else inside the <div> is also treated as a (single) block level element. The specification doesn’t say that each individual element will be treated as an individual block level element. Only that it will treat everything inside as block-level elements.

Therefore in your example

  <em>Emphasized text</em>
  <em>More emphasized text</em>
  More regular text.

This is all treated as a single block level element with multiple in-line elements inside it. Which fits with the specification.

Note that you can control this behavior by explicitly doing this:

  <div>
    <em>Emphasized text</em>
    <em>More emphasized text</em>
    More regular text.
  </div>

Or for the result you expected you can do this:

  <div><em>Emphasized text</em></div>
  <div><em>More emphasized text</em></div>
  <div>More regular text.</div>