Padding
Space inside an element between its content and its border.
Plain English
Padding is the breathing room inside a box. When you add padding to a card, the text and icons inside it stop touching the edges — the background colour fills that inner space. Think of it like the margin inside a picture frame.
Technical
In the CSS box model, padding is the area between the content rectangle and the element's border. It is part of the element's background, so the background-color extends through it. Padding does not collapse — unlike vertical margins — and increases the element's rendered size unless box-sizing: border-box is used.
Live Demo
No Padding — cramped
Card Title
The text presses right against the border with no breathing room, making it hard to read and feeling unfinished.
24px Padding — comfortable
Card Title
24px of padding gives the content room to breathe. The background forms a clear visual boundary and everything feels considered.
Both cards contain identical content — only the padding differs.
Usage
✓ Good usage
Apply 16–24px padding on cards so body text has room to breathe and the background colour forms a clear visual boundary.
✗ Bad usage
0px padding makes text press against the card border, creating a cramped, unpolished appearance.
Recommended values
- 4–8px for dense UIs (data tables, compact lists)
- 12–16px for standard components (buttons, inputs, small cards)
- 24–32px for prominent cards and panels
- 48–64px for hero sections and full-page containers
Common mistakes
- Using margin instead of padding when the background colour needs to extend to the edge.
- Mixing padding-top/padding-bottom with shorthand padding inconsistently.
- Forgetting that padding increases total element size when box-sizing is content-box.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Give the card 24px padding on all sides and 8px gap between the icon and the title.