CSS - Boxes (Box Model)

About

The Box model means that each element is represented as a rectangular box.

The layout phase of the browser rendering engine creates the box model as a tree of box and determines:

With CSS, every element is made up of nested boxes known as the margin, border, padding, and content.

Properties

Dimension

Boxdim

See CSS - Spacing (Box Dimension)

Type / Formatting

The html element defines the default box type that can be overridden by the display property.

The two most known boxes are:

A box's type affects its rendering behavior (for short inline or to a new line).

  • The block box expands to fill the width of the entire window. The html ul element for instance will have this behavior because it is a block-level element (ie block box). By default, block-level elements expand to fill their container elements and force any subsequent sibling elements further down the page.
  • The inline elements rest in line with each other, not stacked on top of each other like blocks. Common inline elements include strong, em, a, and span. By default, Inline elements do not expand to fill extra space, and happily exist side by side, next to their fellow inline neighbors.

Position / Layout

The box content is not confined by this containing block; it may overflow.

CSS - (Box) Positioning (Scheme)

The layout of boxes is governed by:

Styling

Configuration

See CSS - Box sizing (property and definition)

Reference

Task Runner