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:
- the dimension,
- the position
- and the properties (color, background, …)
With CSS, every element is made up of nested boxes known as the margin, border, padding, and content.
Properties
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.
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:
- positioning scheme (normal flow, float, and absolute positioning).
- relationships between elements in the document tree.
- external information (e.g., viewport size, intrinsic dimensions of images, etc.).