Search code examples
htmlcssw3c

Block containers and the Visual Formatting Model


In W3C's explanation of the Visual Formatting Model, Section 9.2.1 state that:

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

It gives this example:

<DIV>
  Some text
  <P>More text
</DIV>

and states:

if a block container box (such as that generated for the DIV above) has a block-level box inside it (such as the P above), then we force it to have only block-level boxes inside it.

It achieves this, it explains, by wrapping "Some text" in an anonymous block-level box.

But if we add an inline element to the box:

<DIV>
    Some text
    <P>More text
    <span>An inline element</span>
</DIV>

The result—JsFiddle—seems to contradict the original statement that a block container box "contains only block-level boxes or...only inline-level boxes":

It appears that the addition of the span creates a block-level box that contains both block-level boxes (one anonymous, one explicit) and an inline-level box.

Has adding the <span> established an inline formatting context? If this is true, doesn't that contradict the statement that an inline formatting context contains only inline-level boxes?

Am I missing something here, or is the W3C logic paradoxical?

EDIT:

So it looks like the spec itself fails to close the <p> element in the example. I've gone ahead and revised my code:

<DIV>
    Some text
    <P>More text</p>
    <span>An inline element</span>
</DIV>

And here is the new jsFiddle. It still seems to me like the span is acting like an inline-level box (i.e., it doesn't take up the entire width of the container.


Solution

  • Your example is broken. The span element is a child element of a paragraph.

    Let us use this for the example instead:

    <DIV>
        Some text
        <P>More text</p>
        <span>An inline element</span>
        <span>An inline element</span>  
    </DIV>

    Here the div generates a principal block-level box.

    That box contains an anonymous block-level box containing the free text, a principle block-level box generated by the paragraph, and another anonymous block-level box containing the two span elements.

    Each span element generates an inline-level box within that last anonymous block-level box (which establishes the inline formatting context).