In a block formatting context, boxes are laid out vertically, starting
at the top. Block-level elements—elements with a display property value of
table, and (in certain circumstances)
run-in—participate in block formatting contexts.
A block-level element with a
display property value
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
div element and the two
elements, plus an anonymous block box for the text that appears between
the paragraphs, as seen in Figure 1.1
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
for any value of
float other than
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.
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.