# Crowded Elements

**SHOULD** · **ID:** `design-crowded-elements` · **Category:** design
**Source:** Custom
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-crowded-elements

> SHOULD: Provide adequate whitespace between interactive elements to prevent accidental activation. Touch targets should have at least 8px gap between them.

Elements too close together reduce readability and usability

This is our own rule, not an upstream citation — the Rams review has no bullet for it, and we previously mislabelled it as one. Two things go wrong in a cramped layout. Reading: with no breathing room, everything sits at the same visual weight and the eye has nothing to group by, so scanning degrades into reading. Pointing: adjacent tap targets with no gap between them produce mis-taps, which is the failure the WCAG 2.2 target rules are about — see interactions-match-hit-targets for the actual size floors (24×24 CSS px minimum, 44×44 on touch). Padding is the cheap fix; spacing between siblings is the one people forget.

## Bad — do not do this

`design-crowded-elements-bad`

```tsx
export function CrowdedElementsBad() {
  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">Crowded Elements</h4>
        <div className="p-2 bg-muted rounded-lg">
          <div className="p-2 bg-background rounded border border-border">
            <h5 className="font-medium text-sm">Card Title</h5>
            <p className="text-xs text-muted-foreground leading-tight">
              This card has minimal padding and tight spacing making it hard to read.
            </p>
            <div className="flex gap-1 mt-1">
              <button className="px-2 py-1 bg-primary text-primary-foreground rounded text-xs">
                Action
              </button>
              <button className="px-2 py-1 border border-border rounded text-xs">
                Cancel
              </button>
            </div>
          </div>
        </div>
        <div className="mt-3 bg-muted rounded p-2 font-mono text-xs">
          <code className="text-error">p-2, gap-1, no margins</code>
        </div>
      </div>
      <p className="text-xs text-error">
        Elements compete for attention - hard to read and tap
      </p>
    </div>
  );
}
```

## Good — do this

`design-crowded-elements-good`

```tsx
export function CrowdedElementsGood() {
  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">Adequate Spacing</h4>
        <div className="p-4 bg-muted rounded-lg">
          <div className="p-4 bg-background rounded-lg border border-border">
            <h5 className="font-medium mb-2">Card Title</h5>
            <p className="text-sm text-muted-foreground mb-4 leading-relaxed">
              This card has comfortable padding and spacing between elements for easy reading.
            </p>
            <div className="flex gap-3">
              <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm">
                Action
              </button>
              <button className="px-4 py-2 border border-border rounded-md text-sm">
                Cancel
              </button>
            </div>
          </div>
        </div>
        <div className="mt-3 bg-muted rounded p-2 font-mono text-xs">
          <code>p-4, mb-2, mb-4, gap-3</code>
        </div>
      </div>
      <p className="text-xs text-success">
        Breathing room makes content easy to scan and interact with
      </p>
    </div>
  );
}
```

## References

- [NN/g — White Space in Form Design](https://www.nngroup.com/articles/form-design-white-space/)