CSS Spacing Scale in rem (4px to 64px)

Building a Spacing Scale in rem

A consistent spacing scale is the backbone of any design system. Converting your pixel-based scale to rem ensures it adapts to user preferences.

4px Base Grid (Tailwind-style)

px	rem	Tailwind class	Usage
0	0	p-0	Reset
1	0.0625	p-px	Hairline borders
2	0.125	p-0.5	Tight inline spacing
4	0.25	p-1	Icon-to-text gap
8	0.5	p-2	Compact padding
12	0.75	p-3	Small card padding
16	1	p-4	Standard padding
20	1.25	p-5	Medium padding
24	1.5	p-6	Large card padding
32	2	p-8	Section spacing
40	2.5	p-10	Large section spacing
48	3	p-12	Page section gaps
64	4	p-16	Major layout spacing

8px Base Grid (Material Design)

Material Design uses 8px as its fundamental spacing unit:

1 unit  =  8px = 0.5rem
2 units = 16px = 1rem
3 units = 24px = 1.5rem
4 units = 32px = 2rem
6 units = 48px = 3rem
8 units = 64px = 4rem

Why rem for Spacing?

Using rem for spacing (not just typography) means that when a user increases their browser font size, the entire layout scales proportionally. Text does not outgrow its containers, padding does not feel cramped, and the visual rhythm is maintained.

CSS Custom Properties Pattern

:root {
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
}

This pattern lets you reference spacing values throughout your CSS while keeping the rem-to-px mapping in one place.