Spacing
6.8
Lesson

Padding Shorthand Property

Instead of using individual properties for top, bottom, right and left padding, the single padding property can be used to specify different values for each direction.

Four values

If this property has four different values separated by spaces:

padding: 10px 20px 30px 40px;

10px is top padding
20px is right padding
30px is bottom padding
40px is left padding

The values get assigned in clockwise direction starting from the top.

Three values

If this property has three values:

padding: 10px 20px 30px;

10px is top padding
20px is right and left padding
30px is bottom padding

Two values

If this property has two values:

padding: 10px 20px;

Top padding and bottom padding are both 10px.
Right padding and left padding are both 20px.

One value

If this property has only one value:

padding: 10px;

All four padding values are 10px