Write different space for top and bottom and for the sides

01 / 05

A small part is decided by its space

The small parts like the link or label at the edge of a header carry very little text. So nearly all of how they look comes from their space.

Write padding: 12px; though and all four sides are the same. The sides end up too narrow, and it easily looks squashed vertically.

.btn {  padding: 12px;}

02 / 05

Line up two values

You have used a form like padding: 8px 16px; a few times in the exercises so far. Time to learn it properly.

Line up two values and you get

the first … the space above and below
the second … the space on the sides

So 8px 16px means "8px above and below, 16px at the sides". You get a part that is wide across.

.btn {  padding: 8px 16px;}

03 / 05

Four values means one side each

You can line up as many as four values. With four, they set top, right, bottom, left, one side each. Remember it as going once round clockwise.

It means the same as writing four lines like padding-top, but reads more easily for taking one line.

.box {  padding: 4px 8px 12px 16px;}

04 / 05

margin works exactly the same

The rule for lining values up is the same on margin.

The margin: 0 auto; you use to centre something was in fact the two-value form, "0 above and below, automatic at the sides". You could already read it by the same rule.

.tag {  margin: 0 8px;}

05 / 05

You do not need a unit on 0

0 alone is fine; you do not have to write 0px. Zero is zero in any unit.

Write padding: 0 12px; and you get "nothing above or below, 12px at the sides". It is the standard shape for making a part that is long and thin across. Have a go.

.tag {  padding: 0 12px;}