Spacing Scale

Consistent Spacing

Define a spacing scale with variables to ensure proportional, consistent spacing throughout the UI.

Example

:root { --s1: 0.25rem; --s2: 0.5rem; --s3: 1rem; --s4: 1.5rem; --s5: 2rem; }
.card  { padding: var(--s4); gap: var(--s3); }
.badge { padding: var(--s1) var(--s2); }

CSS

Full Editor

Pro Tip

A 4px-based scale (4, 8, 16, 24, 32, 48) covers almost all spacing needs.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned