Each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by:

  • box dimensions and type
  • positioning scheme
  • relationships between elements
  • external information (viewport, intrinsic dimensions…)

1. display property

1.1. block

This value causes an element to generate a principal block box.

1.2. inline

This value causes an element to generate one or more inline boxes.

1.1. inline-block

This value causes an element to generate a principal inline-block box.

1.1. list-item

This value causes an element (e.g., li element in HTML) to generate a principal block box and a marker box.

1.1. none

This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the ‘display’ property on the descendants.

2. position property

Positioned elements generate positioned boxes that laid out according to four properties: top, right, bottom and left.

2.1. static position

A static positioned box is laid out according to the normal flow. The top, right, bottom, and left properties do not apply.

User agents may treat position as static on the root element.

2.2. relative position

A relatively positioned box is laid out normally according to the normal flow before moving to a new position that is relative to its normal position. For example:

#box #relative {
  background-color: #b0e57c;
  position: relative;
  top: 20px;
}

Relatively positioned boxes’ offsets are calculated with respect to their default position in normal flow, not their containing blocks’ position.

Note that if all four offsets are specified in a ruleset, top and left will override bottom and right.

2.3. absolute position

Absolutely positioned boxes are taken out of the normal flow. Their offsets are calculated with respect to their nearest containing block.

#box #relative {
  background-color: #b0e57c;
  position: absolute;
  top: 20px;
}

2.4. fixed position

Fixed boxes are positioned with respect to viewport instead of a nearest containing block. It always stays in the same place even if the page is scrolled. top, right, bottom and left properties are applied normally.

3. Block formatting context

Floated elements, absolute elements and block containers that are not block boxes, and block boxes with overflow other than visible (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the margin properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In a block formatting context, 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

4. Inline formatting contexts

An inline formatting context is established by a block container box that contains no block-level boxes. In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned.


Informative references