# Inconsistent Spacing

**SHOULD** · **ID:** `design-rams-inconsistent-spacing` · **Category:** design
**Source:** [RAMS](https://www.rams.ai/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-rams-inconsistent-spacing

> SHOULD: Use consistent spacing values from a defined scale (4px, 8px, 16px, etc.). Avoid mixing arbitrary pixel values. Inconsistent spacing creates visual imbalance.

Use consistent spacing between similar elements

The upstream rule is that four-word bullet, under "Layout & Spacing" — the explanation below is ours. Arbitrary gaps (13px here, 17px there) read as noise because proximity is how a reader infers grouping: if the gap between a label and its input is the same as the gap between two unrelated fields, nothing tells them which label belongs to which control. Pick a scale and stay on it — Tailwind's (4, 8, 12, 16, 24, 32…) is fine — and make the same relationship take the same step everywhere: all card paddings equal, all stack gaps equal, tighter inside a group than between groups.

## Bad — do not do this

`design-rams-inconsistent-spacing-bad`

```tsx
export function RamsInconsistentSpacingBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Inconsistent Spacing</h4>
        <div className="p-3 bg-muted rounded-lg">
          <div className="p-3 bg-background rounded border border-border">
            <div className="font-medium">Card One</div>
            <div className="text-sm text-muted-foreground">Description text</div>
          </div>
          <div className="mt-2 p-3 bg-background rounded border border-border">
            <div className="font-medium">Card Two</div>
            <div className="text-sm text-muted-foreground">Description text</div>
          </div>
          <div className="mt-6 p-3 bg-background rounded border border-border">
            <div className="font-medium">Card Three</div>
            <div className="text-sm text-muted-foreground">Description text</div>
          </div>
        </div>
        <div className="mt-3 bg-muted rounded p-2 font-mono text-xs">
          <code className="text-error">mt-2, mt-6 (8px, 24px - inconsistent)</code>
        </div>
      </div>
      <p className="text-xs text-error">
        Uneven spacing feels random and unprofessional
      </p>
    </div>
  );
}
```

## Good — do this

`design-rams-inconsistent-spacing-good`

```tsx
export function RamsInconsistentSpacingGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Consistent Spacing</h4>
        <div className="space-y-3 p-3 bg-muted rounded-lg">
          <div className="p-3 bg-background rounded border border-border">
            <div className="font-medium">Card One</div>
            <div className="text-sm text-muted-foreground">Description text</div>
          </div>
          <div className="p-3 bg-background rounded border border-border">
            <div className="font-medium">Card Two</div>
            <div className="text-sm text-muted-foreground">Description text</div>
          </div>
          <div className="p-3 bg-background rounded border border-border">
            <div className="font-medium">Card Three</div>
            <div className="text-sm text-muted-foreground">Description text</div>
          </div>
        </div>
        <div className="mt-3 bg-muted rounded p-2 font-mono text-xs">
          <code>space-y-3 (12px gaps throughout)</code>
        </div>
      </div>
      <p className="text-xs text-success">
        Even spacing creates visual rhythm and hierarchy
      </p>
    </div>
  );
}
```

## References

- [Rams design review skill](https://rams.ai/rams.md)
- [Design System Spacing](https://tailwindcss.com/docs/theme)