Spacing
6.3
Lesson

Margin Shorthand Property

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

Four values

If this property has four different values separated by spaces:

margin: 10px 20px 30px 40px;

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

Values get assigned in the clockwise direction starting from the top.

Three values

If this property has three values:

margin: 10px 20px 30px;

10px is top margin
20px is right margin as well as the left margin
30px is bottom margin

Two values

If this property has two values:

margin: 10px 20px;

10px is top and bottom margin
20px is right and left margin

One value

If this property has only one single value:

margin: 10px;

All four margins are 10px in size.