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

Space

Content

When to use it

Give a button a comfortable click area
Keep card content away from the edge
Create room inside a panel
Build consistent component sizes

When NOT to use it

Use padding to separate two independent components
Shrink a control below a comfortable target size
Use different inner spacing for identical items
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.