Spacing Systems for Web Design: The 8-Point Grid and Beyond

A spacing system is a small, fixed set of distances that every margin, padding and gap on a site must come from. The most common foundation is the 8-point grid: spacing values that are multiples of 8px (8, 16, 24, 32, 48, 64 and so on), with 4px half steps for tight details. Name those values as tokens, use smaller ones inside components and larger ones between sections, and your layouts will feel calm and deliberate instead of nudged into place.

Key takeaways

• Use 8px as the base unit and allow 4px for small, tight spaces.
• Keep the scale short (about ten values) and make the steps grow faster as they get larger.
• Name the values as tokens so design files and code share one vocabulary.
• Space inside a group should always be smaller than space between groups.
• Section padding is the biggest lever on how a page feels: generous for calm, tight for dense.

Why spacing needs a system

Spacing is the part of a design that people notice least and feel most. Two cards with 22px and 26px of padding look almost the same, but a page full of near-misses like that feels slightly unsettled, as if nobody quite decided. When every value comes from a short scale, the differences that remain are clearly intentional, and the eye reads them as structure.

A system also speeds everyone up. Designers stop debating 20px versus 24px. Developers stop eyeballing redlines. Reviews become "this should be space-6, not space-5", which is a two-second fix.

The 8-point grid, and why 8

The 8-point grid caught on for a few practical reasons:

• It divides well. Common screen widths and icon sizes (16, 24, 32, 48) are multiples of 8, so elements line up without half pixels.
• The steps are visible. The difference between 8px and 16px is obvious. The difference between 10px and 12px often is not, which tempts people into endless fiddling.
• It scales on high-density screens. Values that are multiples of 8 stay whole numbers at 1.5x, 2x and 3x pixel densities in most cases.

Where 4px fits in

A strict 8px grid is too coarse for small details. The space between an icon and its label, the padding inside a small tag, or the gap between a heading and its eyebrow often looks best at 4px or 12px. So most systems use 8 as the main rhythm and allow 4px half steps at the small end. Above about 32px, the half steps stop being useful and the scale should only grow.

A sample spacing scale

A good scale grows slowly at the bottom, where small differences matter, and quickly at the top, where they do not. Here is a scale that covers almost every website:

Ten values is plenty. If you find yourself wanting 40px, ask whether 32px or 48px would do; usually one of them is clearly better once you try it.

Naming the tokens

There are two common naming styles, and both work:

• Numeric steps like space-1 to space-10. Easy to extend and to reason about ("one step bigger").
• T-shirt sizes like space-xs, space-sm, space-md. Friendlier to read, but awkward when you need to insert a value between two existing sizes.

Tailwind's approach is a third option: a single base unit (0.25rem) multiplied by a number, so p-4 is 16px and p-6 is 24px. That gives you a 4-point grid for free, and you then choose to use mainly the even steps. Whatever you pick, use the same names in your design tool and your code. If you want to go deeper on naming, see design tokens explained.

Internal versus external spacing

The single most useful rule in spacing is this: space inside a group should be smaller than space between groups. It comes from the Gestalt principle of proximity: things that are close together are read as related.

In practice:

• A card's padding (say 24px) should be larger than the gap between the card's title and its text (say 8px).
• The gap between cards in a grid (say 24px) should be no smaller than the gaps inside each card, or the cards stop reading as separate objects.
• The space between sections (say 96px) should be clearly larger than any space within a section.

When a layout feels muddled, check this rule first. A heading that sits equally far from the paragraph above and the paragraph below does not belong to either. Move it closer to the paragraph it introduces, and the structure appears.

Vertical rhythm

Vertical rhythm means that text and the space around it share a common unit, so the page has a steady beat as you scroll. On the web, perfect baseline alignment is fiddly and rarely worth it, but a lighter version is easy and valuable:

• Choose line heights that land on your grid. 16px body text at 1.5 gives 24px lines, which is 3 × 8.
• Space paragraphs with a value from your scale (often 16px or 24px), not with arbitrary margins.
• Space headings asymmetrically: more space above a heading than below it, so it attaches to the content it introduces. For example, 48px above an H2 and 16px below.

Your type scale and spacing scale should be designed together. The type scale guide covers line heights in more detail.

Section padding

Section padding is the vertical space at the top and bottom of each band of a page, and it does more to set the mood of a site than almost any other number.

• Mobile: 48px to 64px top and bottom is typical.
• Desktop: 96px to 160px is typical.
• Tight, energetic or information-dense pages sit at the low end, with sections close together.
• Calm, premium or editorial pages sit at the high end, and let each section breathe.

If you browse serene or luxurious sites, one of the first things you will notice is how much room each section gets. If you browse dense product sites, the opposite. Neither is right in the abstract; the spacing should match what the brand is trying to feel like.

To make section padding fluid, the same clamp() technique used for type works well: something like padding-block: clamp(3rem, 2rem + 5vw, 8rem) moves smoothly from 48px on small screens to 128px on wide ones.

Not every section needs identical padding. A hero section often gets more, a logo bar or a stats strip often gets less. Just keep the variations on the scale.

Gaps in grids and layouts

For grids of cards, features or images, use the CSS gap property rather than margins on each item. gap puts space only between items, never on the outside edges, which removes a whole class of alignment bugs.

Typical values:

• Card grids: 16px on mobile, 24px to 32px on desktop.
• Image galleries: often tighter, 8px to 16px, so the images read as one surface. Some designs go to zero for a seamless mosaic.
• Column gutters in a 12-column layout: 16px on mobile, 24px to 32px on desktop.
• Form fields: 16px to 24px between fields, 8px between a label and its input.

Horizontal page margins (the gutter between content and the screen edge) are part of the system too. 16px to 24px on phones and 32px to 80px on desktop are common, with a max content width somewhere around 1,200px to 1,440px.

Density

Density is how tightly a design packs information, and it is a deliberate choice, not a side effect.

• Compact suits dashboards, tables and tools people use for hours. Smaller paddings (8px to 12px in rows), tighter section spacing.
• Comfortable suits most marketing sites and apps. The default scale above.
• Spacious suits brands, portfolios and editorial sites. Larger paddings and very generous section spacing.

Some design systems offer density as a setting by swapping the token values while keeping the names the same. That is a good argument for semantic token names like space-card-padding layered over your raw scale: you can make cards more compact without touching every component.

Whatever the density, keep touch targets large enough on phones. Buttons and links around 44px tall are a widely used guideline, even when the visible element is smaller and the extra comes from padding.

How to apply the system consistently

A spacing system only works if it is used everywhere. These habits help:

1. Put the scale in code first. Define it as CSS custom properties or a Tailwind theme so the easiest value to type is a correct one.
2. Ban magic numbers. In code review, any raw pixel value for spacing needs a reason. A linter rule can flag them automatically.
3. Let components own their inside, layouts own their outside. A card sets its own padding; the grid that holds it sets the gap. Components should not carry outer margins that fight the layout.
4. Prefer gap and stack utilities to margins. They make spacing a property of the container, which is easier to keep consistent.
5. Audit occasionally. Search your stylesheets for spacing values that are not on the scale. Each one is either a bug or a sign the scale is missing a step.
6. Study real pages. Looking at how good sites space their sections is the fastest way to calibrate. Browsing sections side by side on MUUDS, or opening a moodboard that already defines a spacing scale and exports it as tokens, shows the numbers working in context.

In short

Start with an 8px base and 4px half steps, keep about ten values that grow faster as they get larger, and give them names your whole team uses. Space inside a group less than between groups, choose section padding to match the feeling you want, and use gap for grids. Then enforce it in code, where the system either holds or quietly falls apart.