The CSS padding property

Padding is the space between an element's content and its border. It sits inside the element, so the element's background fills it. That makes padding the property that turns a word into a button-shaped target.

Adding padding

Add one line under the margin from lesson 2:

.btn {
  /* Lesson 2: margin */
  margin: 0 0.5rem 0.5rem 0;
  /* Lesson 3: padding */
  padding: 0.75em 1.5em;
}

The shorthand follows the same pattern as margin. Two values mean top and bottom first, then left and right, so this is 0.75em above and below the text and 1.5em on each side. Written out side by side, the same thing takes four lines:

.btn {
  padding-top: 0.75em;
  padding-right: 1.5em;
  padding-bottom: 0.75em;
  padding-left: 1.5em;
}

Padding cannot be negative. A percentage is allowed, but it is measured against the width of the parent element, even for top and bottom, which is rarely what you want on a button.

Why em and not rem

Lesson 2 used rem, which is relative to the root font size. The unit em is relative to the font size of the element itself. For padding that is the right choice: a button with bigger text should get proportionally bigger padding without you touching the padding again. Worked through:

The rule of thumb that follows: rem for distances between things, em for space that belongs to a piece of text.

What you see after reloading

Not much on the links yet, and that is expected. Padding is invisible until there is a background or a border to show where the box ends. The <button> already has both from the browser's defaults, so it visibly grows. The links catch up in lesson 4 (border) and lesson 5 (background).

The button may also look a little smaller than you expect. Browsers give form controls their own font settings instead of letting them inherit the page font, and in desktop Chrome and Firefox that is a system font at a little over 13px. Its em padding is calculated from that smaller size. Lesson 6 sets one font size on .btn, and the three elements line up.

One more thing happens out of sight. On the inline links, left and right padding pushes the neighbors away, but top and bottom padding does not make the line any taller. The padded area simply overlaps whatever sits above and below. It is the same inline behavior you met with margin, and lesson 10 resolves both at once.

To see padding right away, right-click a link, choose Inspect, and look for the box model diagram in the developer tools. It draws content, padding, border and margin as nested rectangles with their sizes in pixels.

Margin or padding?

The clickable-area row matters most for buttons. A link with generous padding is easier to hit with a thumb or a shaky mouse, while margin around it only adds dead space. So the space that should belong to the button is padding, and the space between buttons is margin.

Common mistakes

• Using margin to make a button bigger. Margin moves the button, it does not grow it.
• Setting a fixed height instead of vertical padding. A fixed height stops matching the text as soon as the font size changes, while em padding adapts. Lesson 9 comes back to this.
• Forgetting that padding adds to the width. By default, a box set to 10rem wide with 1.5em of padding on each side ends up wider than 10rem. The sizing lesson changes how the browser counts with box-sizing.
• Writing padding: 0.75em, 1.5em with a comma. The values in margin and padding are separated by spaces only, and the comma makes the whole declaration invalid, so the browser drops it.

Try it: in the online HTML editor, add font-size: 1.5rem; to .btn for a moment and watch the em padding scale with the text, then delete the line again.