This is an example of the box model. Each progressive example adds one more element - to show the placement and use of padding, borders and margins.

Div One: A Plain Box

height: 300px

width: 300 px

Div Two: Add a Border

The border adds to the area the box takes up on the page.

height: 300px

width: 300 px

+ border: 5px

= 310px total

Div Three: Add a Border + Padding

height: 300px

width: 300 px

border: 5px

padding: 20px

= 350px

Div Four: Border + Padding + Margin

height: 300px

width: 300 px

border: 5px

padding: 20px

margin: 20px

= 390px