LESSON 14

Padding

Learning objective: Add space inside elements with padding.

Understand

Padding is the cushion between content and its border.

padding adds space inside an element, between the content and the border. It is essential for making buttons and cards feel comfortable rather than cramped. Like margin, it can be set per side.

Analogy: Padding is like the stuffing inside a pillowcase, keeping the content away from the edges.

See It in Action

A comfortable button:

.btn {
  padding: 12px 24px;
}
How it works: The button gets 12px of space top and bottom and 24px left and right, giving the label room to breathe.

Try It Yourself

  1. Add padding to a button and watch it grow.
  2. Set different vertical and horizontal padding.
  3. Compare a padded card to an unpadded one.

Quick Quiz

Where does padding add space?

Challenge

Style a comfortable button and card using padding.

Success condition: Your button and card have balanced internal spacing.