Padding

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Learn to control the spacing inside content

padding is the inner spacing between the content and the border. Getting it right matters — it makes buttons easy to tap and cards easy to read. Too little padding and the content ends up jammed against the border, like it can't breathe.

css

.button {
  padding: 12px 20px; /* top/bottom, left/right */
  border-radius: 999px;
}

.card {
  padding: 24px;
}

You should see

Buttons become a comfortable size to tap, and the content inside cards gets more breathing room.

Tip

On mobile, keeping button height at least around 44px makes them much easier to tap.