Box Model
All HTML elements can be considered as boxes. 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
Parts of a Box
The box model allows us to add a border around elements, and to define space between elements.
- content: the content of the box, where text and images appear
- padding: clears an area around the content. The padding is transparent
- border: a border that goes around the padding and content
- margin: clears an area outside the border. The margin is transparent
Calculations
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border +
left
margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border +
top
margin + bottom margin
Box-sizing
Box-sizing is a property that allows us to modify a bit the behaviour of the box, and has two main values:
- content-box: default, the width and height properties (and min/max properties) includes only the content. Border and padding are not included
- border-box: the width and height properties (and min/max properties) includes content, padding and border