CSS box model

Apr 19, 2021css-conceptscss

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.

box

Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas. The diagram shows how these areas relate and the terminology:

  • Content: The content of the box, where text and images appear
  • Padding: Clears a transparent area around the content
  • Border: A border that goes around the padding and content
  • Margin: Clears a transparent area outside the border

The total width and height of an element is calculated based on box-sizing property value:

  • content-box: This is the initial and default value as specified by the CSS standard. The width and height properties include the content, but does not include the padding, border, or margin.
  • border-box: The width and height properties include the content, padding, and border, but do not include the margin.

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing.