Use a spacing scale

Take every padding, margin and gap from 4, 8, 16, 24, 32, 48, 64px.

From refactoring-ui, section 2 “Spacing & Sizing”.

Drag the padding

Drag inside either card, or use the slider.

Free valuesBad
Invoice #1042 $2,400.00 Due Oct 12
p-[13px]13px
Snaps to the scaleGood
Invoice #1042 $2,400.00 Due Oct 12
p-416px
:root {
  --space-1: 4px;   --space-2: 8px;   --space-4: 16px;  --space-6: 24px;
  --space-8: 32px;  --space-12: 48px; --space-16: 64px;
}
.card { padding: var(--space-4); }

const SCALE = [4, 8, 16, 24, 32, 48, 64];
const snap = (px) => SCALE.reduce((best, s) =>
  Math.abs(s - px) <= Math.abs(best - px) ? s : best);

Measure two forms

Show rulers, then snap the left form.

5, 11, 13, 17, 23pxBad

Invite a teammate

…
8, 16, 24pxGood

Invite a teammate

…
.form           { padding: 24px; }
.form h3        { margin-bottom: 16px; }
.field label    { margin-bottom: 8px; }
.field + .field { margin-top: 16px; }
.form .btn      { margin-top: 24px; }

Lint your own CSS

Paste CSS, then click a flagged value to snap it.

ResultLint
    "declaration-property-value-allowed-list": {
  "/^(padding|margin|gap|row-gap|column-gap)/": ["/^((0|4px|8px|16px|24px|32px|48px|64px)( |$))+$/"]
}

    Why it matters, pros and cons

    Why it matters

    Spacing tells readers what belongs together. 13 vs 16 is a guess; 16 vs 24 is a decision.

    Pros

    • Pick from 7 values, not 64.
    • Screens by different people share one rhythm.
    • Reviews can grep for p-[.

    Cons

    • Borders and optical nudges are not spacing.
    • Dense tables may need a deliberate 12px step.
    • Line-height adds invisible space around text.