Section padding on a website: setting vertical rhythm from a spacing scale

Vertical rhythm, briefly

In print typography, vertical rhythm meant aligning every line, heading and image to a baseline grid, so text on facing pages lined up. On the web, strict baseline grids are hard to keep, because images, embeds and user font settings all change heights. What survives is the useful part: spacing that repeats in a predictable pattern, so the eye learns the page's structure without effort. The biggest gap on a page is usually the space between sections, and getting that one right does most of the work.

The rule of proximity

People group things that sit close together. A heading should be closer to the paragraph it introduces than to the section above it; a section's contents should be closer to each other than to the next section. When the gap between sections is about the same as the gaps inside them, the page turns into one long stream and readers can't tell where one topic ends. A useful check is to blur your eyes, or the screenshot: you should see clear blocks separated by clear bands.

Taking spacing between sections from a scale

A spacing scale is a short list of allowed values, often in steps that grow, such as 4, 8, 16, 24, 40, 72 and 120. Every gap on the page uses one of them. Section padding sits at or near the top of the scale. Spacing system for web design covers how to build one; the point here is to use it consistently:

1. Define section padding once, as a custom property such as --section-y, and apply it to every section. MDN's custom properties guide explains defining shared values on :root.
2. Scale it with the screen: padding-block: clamp(56px, 8vw, 104px). MDN's clamp() reference describes the minimum, preferred and maximum values.
3. Use padding, not margin, on sections, so backgrounds fill the whole band and margins don't collapse into each other unexpectedly.
4. Vary on purpose, not by accident. A hero may take more space and a dense footer less, but two neighbouring sections shouldn't differ by a few pixels.

When sections share a background

Padding behaves differently depending on what separates sections. Two sections on the same ground, with only space between them, show the full top padding of one plus the bottom padding of the other, which can look like a chasm. Two sections on contrasting grounds show each band's padding inside its own colour, which looks balanced. A thin rule between sections works as a third option: it lets you use less space while still marking the boundary. Pick one approach for the page and stick to it.

Common section spacing problems

• Doubled gaps from a section's bottom padding plus the next heading's top margin. Remove top margins from the first element inside a section.
• Desktop padding on phones: 120px above and below every section on a 375px screen means a lot of scrolling past nothing.
• Every section a different size, because each was tuned by eye while building. Snap them back to the scale.
• A cramped hero. The first section often needs more air than the rest, not less.
• Whitespace used to fill, not to separate. If a section needs a lot of padding to look finished, it may need less content or a stronger layout instead. See whitespace in web design.

Section spacing in Anticode

Anticode's design systems set section padding from a single token: sections take clamp() padding that runs from about 56px on narrow screens to 104px on wide ones, top and bottom, with a hairline rule in the system's line colour between them. Spacing inside sections, such as gaps between cards or between a heading and its introduction, comes from the system's tokens too, so the hierarchy of gaps holds across the page.

The layout editor lets you change the gaps between elements inside a section using a fixed set of steps, from none through extra-small to extra-extra-large, each compiled to a fluid value. That keeps hand adjustments on the scale rather than at arbitrary pixel values.

Questions people ask

How much padding between website sections?

Commonly 80 to 120px top and bottom on a laptop and about half that on a phone. It should be clearly larger than any gap inside a section.

Should section padding be smaller on mobile?

Yes. Scale it with clamp() or a breakpoint so phones get roughly half the desktop value; otherwise visitors scroll past large empty bands.

Padding or margin for sections?

Padding. It keeps backgrounds filling the band and avoids margins collapsing between neighbouring sections.

Sources

1. clamp(), MDN Web Docs, checked 24 October 2026
2. Using CSS custom properties (variables), MDN Web Docs, checked 24 October 2026