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…)
This value causes an element to generate a principal block box.
This value causes an element to generate one or more inline boxes.
This value causes an element to generate a principal inline-block box.
This value causes an element (e.g.,
li element in HTML) to generate a principal block box and a marker box.
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.
Positioned elements generate positioned boxes that laid out according to four properties:
A static positioned box is laid out according to the normal flow. The
left properties do not apply.
User agents may treat position as
static on the root element.
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:
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,
left will override
Absolutely positioned boxes are taken out of the normal flow. Their offsets are calculated with respect to their nearest containing block.
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.
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.