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.


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.