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:
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.