Spacing Calculator

Calculate design system spacing scales. Presets for Tailwind, Material Design, and Bootstrap

Settings

Base Size (px)

4px8px

Preset

Tailwind CSSMaterial DesignBootstrapCustom

Spacing Table

Value	px	rem	em	Tailwind
0px	0	0	0	p-0
1px	1	0.0625	0.0625	p-px
2px	2	0.125	0.125	p-0.5
4px	4	0.25	0.25	p-1
8px	8	0.5	0.5	p-2
12px	12	0.75	0.75	p-3
16px	16	1	1	p-4
20px	20	1.25	1.25	p-5
24px	24	1.5	1.5	p-6
32px	32	2	2	p-8
40px	40	2.5	2.5	p-10
48px	48	3	3	p-12
64px	64	4	4	p-16
80px	80	5	5	p-20
96px	96	6	6	p-24

Visual Preview

1px

2px

4px

8px

12px

16px

20px

24px

32px

40px

48px

64px

80px

96px

CSS Variables

:root {
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 4px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;
  --space-13: 80px;
  --space-14: 96px;
}