The box model: content + padding + border + margin

Every element is a box. The box has four parts.

From the inside out:

┌─────────────────────────────────────────┐  ← margin
│ ┌───────────────────────────────────┐ │
│ │ border                            │ │
│ │ ┌───────────────────────────────┐ │ │
│ │ │ padding                       │ │ │
│ │ │ ┌───────────────────────────┐ │ │ │
│ │ │ │ content (your text)       │ │ │ │
│ │ │ └───────────────────────────┘ │ │ │
│ │ └───────────────────────────────┘ │ │
│ └───────────────────────────────────┘ │
└─────────────────────────────────────────┘

1. Content — the text or child elements.
2. Padding — clear space INSIDE the border. Background color extends here.
3. Border — the visible outline. Has its own thickness, style, color.
4. Margin — clear space OUTSIDE the border. Background does NOT extend here (it's transparent).

Why "padding extends background, margin doesn't"

Padding is INSIDE the box. Whatever background you set fills it. Margin is OUTSIDE the box — it's the space BETWEEN this box and the next one. The parent's background shows through.

Shorthand syntax

padding: 16px;                /* all four sides */
padding: 16px 24px;           /* top/bottom 16, left/right 24 */
padding: 8px 16px 24px;       /* top 8, left/right 16, bottom 24 */
padding: 8px 16px 24px 32px;  /* top, right, bottom, left (clockwise from top) */

Same shorthand applies to margin and border-width.

Per-side longhand

padding-top: 16px;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;

border-top: 1px solid #ccc;
border-radius: 8px;