In CSS, the box model describes the rectangular boxes that are generated for elements in document tree and laid out according to the visual formatting model, standardized in CSS Box Sizing Module Level 3.
Each box has a content area (text, 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, specifying whether or not an element’s borders and padding should be included, margins always excluded.
content-box(default): The width and height properties include the content, but does not include the padding, border, or margin. When you set the
heightproperties, you just set the width and height of the content area.
border-box: The width and height properties include the content, padding, and border, but do not include the margin. When you set the
heightproperties, you set the width and height of the border area.
It is often useful to set
border-box to layout elements. This makes dealing with the sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content.
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.