Box Model

In addition to setting an element's height and width, elements have three other properties that explicitly control spacing:

1. 'Padding' specifies spacing between the inside of an element's border and the contents of that element (which includes height and width!)

2. 'Border' sets a perimeter around an element. In addition to specifying a color and a particular type of border, you can also specify a thickness.

3. 'Margin' specifies spacing between the outside of an element's border and any adjacent elements.

Together, these attributes form the box model, a way of describing the space taken up by an element.

Box Model

By default, the total size of an element can be calculated with:

`width` = `width` + horizontal `padding` + horizontal `border`
and
`height` = `height` + vertical `padding` + vertical `border`

A newer, and arguably better way, is to set the element's CSS box-sizing property to border-box instead of the default content-box.