# Symmetrical Padding

**NEVER** · **ID:** `layout-interface-symmetrical-padding` · **Category:** layout
**Source:** [interface-design](https://github.com/Dammyjay93/interface-design)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/layout-interface-symmetrical-padding

> NEVER: Give a box four different padding values (`padding: 24px 16px 12px 16px`) — that is residue from nudging one side, not a decision, and it de-centres the content so a stack of cards loses its rhythm. Use one uniform value (`padding: 16px`) or at most a single horizontal/vertical pair (`padding: 12px 16px`).

Give a box one padding value on all four sides, or at most a single horizontal/vertical pair — never four different numbers

The rule is narrow and mechanical, which is what makes it enforceable: padding is uniform (padding: 16px), or a single axis pair (padding: 12px 16px) when the horizontal side genuinely needs more room than the vertical. Four distinct values — padding: 24px 16px 12px 16px — is almost never a decision; it is the residue of someone nudging the top once and the bottom once and never reconciling them. The cost is visible: the content is no longer centred inside its own box, so a stack of such cards has no shared rhythm, and the eye reads the drift as sloppiness even when it cannot name it. This is a high-frequency tell in AI-generated UI, because a model emits each side independently and has no reason to make them agree. Distinct from the padding-scale rule (layout-impeccable-cramped-padding), which asks whether there is enough padding; this one asks whether the four values agree.

## Bad — do not do this

`layout-interface-symmetrical-padding-bad`

```tsx
/**
 * Bad: four different padding values on one box — `padding: 24px 16px 12px 16px`.
 * The content block sits visibly off-centre inside its own card: 24px of air above,
 * 12px below. Nobody chose that. It is what you get when a top value is nudged once
 * and a bottom value is nudged once and nothing ever reconciles them.
 */
export function InterfaceSymmetricalPaddingBad() {
  return (
    <div className="w-full max-w-sm space-y-3">
      <p className="text-xs text-muted-foreground">Asymmetric padding: 24 / 16 / 12 / 16</p>

      {/* pt-6 = 24px, pr-4 = 16px, pb-3 = 12px, pl-4 = 16px */}
      <div className="rounded-xl border border-border bg-card pt-6 pr-4 pb-3 pl-4">
        <div className="rounded-md bg-muted p-3">
          <p className="text-sm font-medium text-foreground">Deploy succeeded</p>
          <p className="mt-1 text-xs text-muted-foreground">main &middot; 2 minutes ago</p>
        </div>
      </div>

      <div className="rounded-md border border-border bg-muted px-3 py-2">
        <code className="font-mono text-xs text-foreground">padding: 24px 16px 12px 16px;</code>
      </div>

      <p className="text-xs text-error">
        Twice as much space above the content as below it. The box is not centred in itself, and
        stacked next to siblings with their own private shorthand it reads as drift, not rhythm.
        Four unequal values is one of the highest-frequency tells in generated UI.
      </p>
    </div>
  );
}
```

## Good — do this

`layout-interface-symmetrical-padding-good`

```tsx
/**
 * Good: padding is uniform (`padding: 16px`), or at most a single horizontal/vertical
 * pair (`padding: 12px 16px`) when the horizontal side genuinely needs more room.
 * Never four different values.
 */
export function InterfaceSymmetricalPaddingGood() {
  return (
    <div className="w-full max-w-sm space-y-3">
      <p className="text-xs text-muted-foreground">Uniform padding: 16 on all four sides</p>

      {/* p-4 = 16px on every side */}
      <div className="rounded-xl border border-border bg-card p-4">
        <div className="rounded-md bg-muted p-3">
          <p className="text-sm font-medium text-foreground">Deploy succeeded</p>
          <p className="mt-1 text-xs text-muted-foreground">main &middot; 2 minutes ago</p>
        </div>
      </div>

      <p className="text-xs text-muted-foreground">
        The one allowed asymmetry: a single H/V pair &mdash; 12 vertical, 16 horizontal
      </p>

      {/* py-3 = 12px, px-4 = 16px — one pair, still symmetric on each axis */}
      <div className="rounded-xl border border-border bg-card py-3 px-4">
        <div className="rounded-md bg-muted p-3">
          <p className="text-sm font-medium text-foreground">Build queued</p>
          <p className="mt-1 text-xs text-muted-foreground">preview &middot; just now</p>
        </div>
      </div>

      <p className="text-xs text-success">
        Top matches bottom, left matches right. The content is centred in its own box, so a column
        of these cards has one repeating rhythm instead of four private ones.
      </p>
    </div>
  );
}
```

## References

- [interface-design (Damola Akinleye)](https://github.com/Dammyjay93/interface-design)
- [MDN: padding](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding)