New! My 44-page ebook "CSS in 44 minutes" is out! 😃
#margin
Shorthand property for margin-top
margin-right
margin-bottom
and margin-left
.
default
margin: 0;
Removes all margins.
margin: 30px;
When using 1 value, the margin is set for all 4 sides.
margin: 30px 60px;
When using 2 values:
- the first value is for top/bottom
- the second value is for right/left
To remember the order think about the values you haven't defined.
If you enter 2 values (top/right), you omit setting bottom and left. Because bottom is the vertical counterpart of top, it will use top’s value. And because left is the horizontal counterpart of right, it will use right’s value.
margin: 30px 60px 45px;
When using 3 values:
- the first value is for top
- the second value is for right/left
- the third value is for bottom
To remember the order think about the values you haven't defined.
If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.
margin: 30px 60px 45px 85px;
When using 4 values:
- the first value is for top
- the second value is for right
- the third value is for bottom
- the fourth value is for left
To remember the order, start at the top and go clockwise.