CSS — Padding

What padding is

Padding = space inside an element, between content and its border:

.box {
    border: 2px solid teal;
    background: #e6fffa;
    padding: 24px;
}

What the browser displays

(The text sits comfortably away from the border, floating on the pale background — the background extends under the padding.)

Key insight: padding is part of the element's visible box. Backgrounds and borders wrap around it — unlike margin, which is invisible outside.

┌─────────────────────────────┐  ← border
│  ↕ padding                  │
│   ┌───────────────────┐     │
│   │  actual content   │     │
│   └───────────────────┘     │
│                             │
└─────────────────────────────┘

Per-side control

.box {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

Same clockwise shorthands as margin:

padding: 10px 20px 30px 40px;   /* top right bottom left (TRBL) */
padding: 16px 32px;             /* vertical | horizontal */
padding: 16px;                  /* all sides */

The classic button recipe

Padding is button sizing:

button {
    background: teal;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;      /* vertical | horizontal */
}

Change	Effect
padding: 10px 20px	Standard button
padding: 16px 32px	Big prominent CTA
padding: 6px 12px	Compact chip/badge

Buttons without padding look like cramped text labels — this one property is the difference.

Text readability padding

Never let text touch its container's edges:

<style>
    .callout {
        background: #fff8e1;
        border-left: 4px solid #f0a500;
        padding: 16px 16px 16px 20px;   /* extra left for the accent bar */
    }
</style>

<div class="callout">
    <strong>Note:</strong> this warning text has room to breathe.
</div>

What the browser displays

(A soft yellow callout with an orange left bar; the text floats clearly inside it rather than hugging the edge.)

Padding vs margin — choosing

They coexist on the same element with different jobs:

.card {
    border: 1px solid #ddd;
    padding: 16px;        /* space INSIDE, between border and text */
    margin-bottom: 24px;  /* space OUTSIDE, gap to the next card */
}

Decision rule:

Pushing content away from the element's own edge? → padding
Pushing neighboring elements away?                → margin

Visual test: give the element a temporary background. If the gap should be colored, it's padding; if it should stay page-colored, it's margin.

Padding affects size (until you tame it)

/* Renders 240px wide! 200 + 20 left pad + 20 right pad */
.wide { width: 200px; padding: 0 20px; }

The universal fix — declare once per project:

* {
    box-sizing: border-box;   /* padding counts INSIDE declared width */
}

After that, width: 200px means the whole box truly renders 200px regardless of padding. Every modern codebase sets this globally; the box-model lesson explains why.

Asymmetric padding patterns

.list-item  { padding: 12px 16px 12px 48px; }  /* room for an icon on the left */
.banner     { padding: 64px 24px; }            /* tall hero, safe side gutters */
.tag        { padding: 2px 8px; }              /* tight chip */
blockquote  { padding-left: 24px; }            /* classic quote indent */

Uneven values are normal — design intent beats symmetry.

Mini Practice

1. Make .card: white background, border, radius 12px, padding 20px — feel the difference padding makes
2. Build three buttons at compact/standard/large sizes using only padding changes
3. Temporary-background test: add background: red to an element and identify which gaps turn red (padding) vs which stay clear (margin)
4. Set global box-sizing: border-box, then make a true-200px padded card
5. Recreate a blockquote: left accent bar via border + generous padding-left

Next: height & width →