Inconsistent Spacing

What is this?

Picture a wall of picture frames in a gallery. Some are hung perfectly level, evenly spaced. Others are crooked, bunched together in one corner, with a huge empty gap on the other side. You'd notice something was "off" even if you couldn't articulate what. That's exactly what inconsistent spacing does to your website. When your padding is 16px here, 23px there, and 11px somewhere else, the whole page feels rickety — like it was assembled in a rush. The cat's eye twitches every time.

Why it matters

• For your visitors: Inconsistent spacing creates subconscious unease. Your visitors won't think "the margin-bottom on that card is 7px less than the others," but they will think "this site feels cheap" or "something's not right here." It erodes trust without them knowing why.

• For your business: Trust drives conversions. A study by Stanford found that 75% of users judge a company's credibility based on visual design alone. Sloppy spacing is one of the fastest ways to look unprofessional, especially when competitors have clean, even layouts.

• The standard: Use a spacing scale based on a consistent base unit (typically 4px or 8px). Every margin, padding, and gap on your site should be a multiple of that unit. No magic numbers, no "eyeballing it."

/* 4px base unit: 4, 8, 12, 16, 24, 32, 48, 64 */
.card { padding: 24px; margin-bottom: 16px; }
.card-title { margin-bottom: 8px; }
.card-body { margin-bottom: 16px; }
.section { padding: 64px 0; }

/* Every value is a guess */
.card { padding: 19px; margin-bottom: 13px; }
.card-title { margin-bottom: 5px; }
.card-body { margin-bottom: 22px; }
.section { padding: 55px 0; }

How to fix it

React / Next.js

Tailwind's spacing scale is already based on a 4px grid (1 = 4px). Stick to these values and resist the urge to use arbitrary values:

export function FeatureCard({ title, description }: { title: string; description: string }) {
  return (
    // p-6 = 24px, gap-4 = 16px, mb-2 = 8px — all multiples of 4
    <div className="flex flex-col gap-4 border border-neutral-800 p-6">
      <h3 className="mb-2 text-lg font-semibold text-white">{title}</h3>
      <p className="text-sm text-neutral-400">{description}</p>
    </div>
  );
}

export function FeatureGrid({
  features,
}: {
  features: Array<{ title: string; description: string }>;
}) {
  return (
    // py-16 = 64px vertical padding, gap-6 = 24px between cards
    <section className="py-16">
      <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
        {features.map((f) => (
          <FeatureCard key={f.title} title={f.title} description={f.description} />
        ))}
      </div>
    </section>
  );
}

Plain HTML / CSS

/* Define your spacing scale as custom properties */
:root {
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
}

/* Use ONLY these values for all spacing */
.card {
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}
.section {
  padding-block: var(--space-16);
}
.stack > * + * {
  margin-top: var(--space-4);
}

How the cat scores this

The scanner extracts computed spacing values (padding, margin, gap) from your page elements and checks whether they cluster around a consistent base unit. If most values are multiples of 4 or 8, you're golden. If the scanner finds a wide spread of arbitrary values (13px, 19px, 37px), it flags inconsistency. It also checks whether sibling elements (like a row of cards) share the same spacing.

Further reading

• Space in Design Systems — Nathan Curtis's definitive guide to spacing scales
• Tailwind Spacing Scale — the 4px-based scale that powers millions of sites
• The 8-Point Grid — why multiples of 8 feel right