12 - The Padding Box

The Padding Box

Next, let’s explore the padding box!

Padding is empty space just outside of an element’s content.

This layer of the box model is set with the padding property:

padding: 40px;

In the example above, we are adding 40px of padding to all four sides of a given element.

If we want to give separate padding values to any side of an element:

padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;

We can do the same thing with four separate styles, using just the padding property:

padding: 5px 10px 15px 20px;

From left to right, the values represent the styles for the top, right, bottom, and left sides.