Building a Consistent Spacing System for UI

Why Spacing Matters

Inconsistent spacing is the number one reason amateur interfaces look amateur. When padding, margins, and gaps follow a system, everything feels intentional — even if the colors and typography are basic.

The Base Unit Approach

Pick a base unit (4px or 8px are common) and derive all spacing from it:

• 4px (0.25rem) — tight, between related text
• 8px (0.5rem) — compact padding
• 12px (0.75rem) — standard gap between elements
• 16px (1rem) — comfortable padding
• 24px (1.5rem) — section padding on mobile
• 32px (2rem) — between content groups
• 48px (3rem) — between page sections
• 64px (4rem) — major section breaks

Using a 4px base means every value is divisible by 4. This creates subtle visual alignment that the eye detects even if the brain does not.

Applying the Scale

Within components: tight spacing (4-12px). Elements inside a card are closely related, so they should be close together.

Between components: medium spacing (16-32px). Cards in a grid, form fields in a form.

Between sections: large spacing (48-96px). Hero to features, features to pricing.

CSS Implementation

Define your scale as custom properties:

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
}

Or use Tailwind's built-in spacing scale which follows the same principle.

Vertical Rhythm

Keep vertical spacing consistent within content areas. If paragraphs have 16px margin-bottom, headings might have 24px margin-top and 8px margin-bottom. The key is consistency — same element types should always have the same spacing.

Common Mistakes

• Using arbitrary pixel values (17px, 23px, 31px) instead of scale values
• Different padding on similar components (one card has 16px, another has 20px)
• Too little space between major sections — let content breathe
• Confusing padding and margin — padding is inside the box, margin is outside

The Quick Fix

If an interface looks crowded or "off," increase spacing between sections first. More whitespace almost always improves the look. Then check if component internal spacing is consistent. These two adjustments fix most spacing issues.