CSS - Block Box Layout

About

Block are box that can be seen as stacked element (such as paragraphs, section, …)

Block boxes:

Formatting Rules

The formatting rules in order to render a block box are:

  • A block element occupies the entire space of its parent element, thereby creating a “block”.
  • Browsers typically display the block element with a newline both before and after the element.
  • By default, block elements begin on new lines, but inline elements can start anywhere in a line.
  • Block-level elements may contain inline elements.

In a block formatting context (ie a block box), boxes are:

  • laid out one after the other, vertically (ie with a new line between them)
  • beginning at the top of a containing block.

The vertical distance between two sibling boxes is determined by the 'margin' properties.

Each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

See the full block formatting specification

Formatting Context

A new block formatting contexts is created when the following element are encountered:

Example

Basic

<p>First P (Default display: block)</p>
<p>Second P (Default display: block) <BR> And some <BR> comment</p>
p {
   border:1px solid black;
   padding: 20px;
}

Generation

A block box is generated:

Tree

Each block element:

  • generates a principal block-level box
  • that may contains descendant boxes and generated content

Some block elements may generate additional boxes in addition to the principal box: eg CSS - list-item (list formatting) elements. These additional boxes are placed with respect to the principal box.

Documentation / Reference

Task Runner