Spacing

The spacing scale provides consistent values for padding, margin, gap, and other spacing properties. Based on a 4px base unit following Tailwind's spacing scale.

Spacing Scale
Use these values with Tailwind classes like p-4, m-6, gap-2, etc.
0
0
0px
p-0
0.5
0.125rem
2px
p-0.5
1
0.25rem
4px
p-1
1.5
0.375rem
6px
p-1.5
2
0.5rem
8px
p-2
2.5
0.625rem
10px
p-2.5
3
0.75rem
12px
p-3
3.5
0.875rem
14px
p-3.5
4
1rem
16px
p-4
5
1.25rem
20px
p-5
6
1.5rem
24px
p-6
7
1.75rem
28px
p-7
8
2rem
32px
p-8
9
2.25rem
36px
p-9
10
2.5rem
40px
p-10
11
2.75rem
44px
p-11
12
3rem
48px
p-12
14
3.5rem
56px
p-14
16
4rem
64px
p-16
20
5rem
80px
p-20
24
6rem
96px
p-24
Usage Examples
Common spacing patterns in the design system

Padding

p-2 (8px)
p-4 (16px)
p-6 (24px)

Gap (Flexbox/Grid)

gap-2

gap-4

gap-6