Padding adds space inside an element, between its border and content. Unlike margin, padding accepts length values and keywords but never auto.
When to use
Breathing room inside buttons, cards, and inputs. Padding increases hit area without shifting siblings.
Core concepts
- Padding grows the element's background and border box inward.
- inherit and initial reset padding to parent or browser defaults.
- Pair asymmetric py/px for compact controls, tighter vertically, wider horizontally.
Class combinations
Utilities stack. These recipes do more together than any single class alone. Try them after you've explored the sandbox above.
Comfortable card
rounded-xl border p-6Padding defines inner breathing room; border + radius sell the card shape. Increase padding before font size for touch targets.
Asymmetric inset
py-3 px-4Tighter vertically, wider horizontally, common for chips, tabs, and compact buttons.
Summary
- padding adds space inside the border box, between the border and the content. It increases the element's clickable area.
- Uniform padding keeps cards and buttons balanced; asymmetric padding (more horizontal) suits text-heavy controls.
- Unlike margin, padding never collapses and always shows the element background color.
- padding affects the size of the box when box-sizing is content-box; with border-box (Tailwind default), width includes padding.
- Touch targets should include padding to reach at least 44px. Padding is often the cleanest way to grow hit areas.