Block Formatting

In a block formatting context, boxes are laid out vertically, starting at the top. Block-level elements—elements with a display property value of block, list-item, table, and (in certain circumstances) run-in—participate in block formatting contexts.

A block-level element with a display property value other than table will generate a principal box block. A principal box will contain either block boxes or inline boxes as children, never both. If the element contains a mix of block-level and inline children, anonymous block boxes will be generated where necessary, so that the principal box will only contain block boxes. Consider the following example:

<div>
  <p>A paragraph</p>
  Some text in an anonymous box
  <p>Another paragraph</p>
</div>

The HTML snippet above will, by default, generate a principal box for the div element and the two p elements, plus an anonymous block box for the text that appears between the paragraphs, as seen in Figure 1.1

Figure 1. An anonymous block box An illustration of an anonymous block box. The text between two
        paragraph elements is enclosed within an anonymous box.

An anonymous block box inherits its properties from the enclosing non-anonymous box—the div box in this example. Any non-inherited properties are set to their initial (default) values.

The principal box becomes the containing block for non-positioned descendant boxes, and it’s also the box that’s affected for any value of position other than static, and for any value of float other than none.

In a block formatting context the vertical distance between two sibling boxes is determined by their respective margin properties; vertical margins between adjacent block boxes collapse if there are no borders or padding in the way. For more information, see Collapsing Margins.

In a left-to-right environment, the left outer edge of each block box touches the left edge of the containing block. In a right-to-left environment, the right edges touch. This happens even if there are floated elements in the way, except if the block box establishes a new block formatting context. In that case, the block box becomes narrower to accommodate the floated elements.

Footnotes

1 Note that mixing block and inline content like this is semantically questionable, and it’s not something we recommend. This example is provided just to illustrate how CSS handles the situation.

User-contributed notes

Related Products