Spacing Calculator
Calculate, visualize, and learn about spacing values in our design system
Spacing Calculator
p-4padding: 16px;Spacing Best Practices
- Use consistent spacing to create visual rhythm
- Increase spacing for separation between unrelated elements
- Decrease spacing for related elements to show their connection
- Use the 8px grid system (multiples of 4 or 8) for consistency
- Consider content density needs when choosing spacing values
Spacing Preview
Content
4 (16px)
Padding (all)
Spacing Scale
2px (0.5)
4px (1)
8px (2)
16px (4)
24px (6)
32px (8)