Spacing Scale Generator
Generate a systematic spacing scale for consistent layouts in your design system or CSS framework.
4px is common (Material, Tailwind)
Visual Scale
CSS Custom Properties
Frequently Asked Questions
What is a spacing scale?▼
A spacing scale is a set of predefined spacing values used consistently throughout a design system. Instead of arbitrary values like 7px, 11px, 23px, you use a limited set like 4, 8, 12, 16, 24, 32, 48, 64px. This creates visual rhythm and makes layouts feel cohesive. All spacing — margin, padding, gap, width, height — comes from the same scale.
Why use a 4px base unit?▼
4px (0.25rem) aligns well with most font metrics and creates a grid that divides evenly. It's the base unit used by Material Design, Tailwind CSS, Ant Design, and Chakra UI. The 8pt grid is also popular: multiples of 8 (8, 16, 24, 32) work well for component spacing while multiples of 4 work for tighter micro-spacing.
Should I use px or rem for spacing?▼
rem is preferred for accessibility — it respects the user's browser font size setting. If a user sets their default font to 20px (for readability), rem-based spacing scales proportionally. px ignores this. The root font is typically 16px, so 1rem = 16px, 0.25rem = 4px, 0.5rem = 8px, etc.
What is the Tailwind CSS spacing scale?▼
Tailwind uses a 4px base: space-1 = 4px (0.25rem), space-2 = 8px, space-4 = 16px, space-6 = 24px, space-8 = 32px, space-12 = 48px, space-16 = 64px. The numbers map to multiples of 4px. Tailwind includes half-values (space-1.5 = 6px) and non-linear values at larger sizes.