In CSS, the term “box model” is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
Explanation of the different parts:
- Content Area: This area consists of content like text, images, or other media content. It is bounded by the content edge and its dimensions are given by content-box width and height.
- Padding Area: It includes the element’s padding. This area is actually the space around the content area and within the border-box. Its dimensions are given by the width of the padding-box and the height of the padding-box.
- Border Area : It is the area between the box’s padding and margin. Its dimensions are given by the width and height of the border.
- Margin Area: This area consists of space between the border and the margin. The dimensions of the Margin area are the margin-box width and the margin-box height. It is useful to separate the element from its neighbors.
| Size of the box | Properties of CSS |
|---|---|
| Height | height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom |
| Width | width + padding-left + padding-right + border-left + border-right + margin-left + margin-right |
