Padding
You might say
The text is pressed right against the edge of the box. Add some breathing room inside it.
Create space between a box and its contentPadding adds room inside an element, between its border and its content. It affects the visible size and click area of buttons, cards, and panels. Keep repeated components on the same spacing scale so they feel related.
Know first
You can say this to an AI Agent
Increase horizontal and vertical button padding so text clears the border and the hit area grows, while preserving existing external margin. Test short text, long text, and icon-only buttons for height, side spacing, and click area.
When to use it
- Give a button a comfortable click area
- Keep card content away from the edgeToo smallAppropriate
- Create room inside a panelSpacing is too smallKeep padding
- Build consistent component sizes
When NOT to use it
- Use padding to separate two independent componentsmargin ↔ adds space outsidepadding ↔ adds space insideContent
- Shrink a control below a comfortable target size
- Use different inner spacing for identical itemsFirst lineSecond lineParagraph spacing should use line-height instead of increasing padding line by line.
- Add spaces to text instead of styling the container
Anatomy
Content
outer boundary of padding
White space with element background color
Content protected by padding
Variants
16px
Content
The default blank space for cards and panels
8px 16px
Button
There are more horizontal ones than vertical ones, and buttons and labels are commonly used.
Asymmetric
Card
When you want more breathing sensation on one side
Typical use cases
Button
padding: 16px
Visits this week
48,210
▲ +8.2% compared to last week
Card
✕ The click area is only a tiny bit
✓ padding: 10px 26px, easy to click
Input
✕ padding is too small and the content is close to the border
✓ Left and right 14px, text not bordered
Content panel
padding: 20px
Turn on message notifications?
You will be notified immediately when there are new comments.
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check