Practice!

Practice using margin and padding below, using 1 to 4 values.

Notice that the background colour doesn't flow into the space created by margin, since margin adds space around and outside of the element.

Border box: width, padding & border

The relationship between width, padding and border can be confusing.

Let’s try adding one property at a time, and watch how the size of the box changes: (1) set the width to 450px, (2) add 35px of padding, (3) increase the border to 15px.

Notice how the size of the box gets wider? Let's look at the math.

width + padding left + padding right + border left + border right = total size
450 + 35 + 35 + 15 + 15 = 550px

¯\_(ツ)_/¯

Border Box Fix

Luckily, there's a fix for this. But first let's compare how it looks with and without the fix. Notice that the values are the same in both examples but one appears to be bigger than the other?