Spacing and padding rules for a neat, consistent layout

Look closely at a page that feels slightly messy and you will often find the cause is not colour or fonts but gaps. Twenty-three pixels above one heading, forty above the next. A card with generous padding beside another that is cramped. These differences are small, but the eye notices them. Clear spacing and padding rules fix this at the root, turning hundreds of individual decisions into a handful of reusable values. This guide covers the scale, the grouping logic, section rhythm and how developers keep it all consistent.

Margin, padding and gap: getting the terms straight

Three CSS terms control almost all spacing on a web page:

• Padding is space inside an element, between its content and its edge. A button’s padding decides how much room surrounds its label.
• Margin is space outside an element, pushing neighbouring elements away.
• Gap sets the space between items inside a flexbox or grid layout, such as the distance between product cards in a row.

Using gap for spacing between items in a layout, and padding for space inside components, tends to produce fewer surprises than scattering margins on everything.

Build a spacing scale on 4 or 8 pixels

A spacing scale is a short list of allowed values. Instead of choosing 13px here and 27px there, every gap on the site uses a number from the list.

Why multiples of 4 and 8 work

Common screen sizes and many icon and component sizes divide neatly by 4 and 8, so a scale based on these numbers lines up cleanly. It is also easy to remember and simple to communicate between designers and developers. Many established design systems use an 8px base with 4px steps for fine adjustments.

A practical scale

This set covers nearly every need on a business website:

1. 4px: tight spacing, such as between an icon and its label
2. 8px: small gaps inside compact components
3. 12px: space between a form label and its input
4. 16px: standard padding inside cards and buttons, gap between related items
5. 24px: space between groups inside a section, card grid gaps
6. 32px: space between a section heading and its content
7. 48px: space between sections on mobile
8. 64px: space between sections on tablet
9. 96px: space between sections on large screens

If a value is not on the list, it should not be used. When something looks wrong, move one step up or down the scale rather than inventing a new number.

Group related items using proximity

People read closeness as connection. That makes spacing a way to show structure without adding borders or boxes. The rule is simple: space inside a group should be smaller than space between groups.

Some examples of this rule applied:

• A heading sits closer to the paragraph it introduces than to the paragraph above it. For instance, 32px above the heading and 12 to 16px below.
• A form label sits 8 to 12px above its field, with 24px between one field group and the next.
• Product name, price and rating inside a card are 4 to 8px apart, while cards are 24px apart.
• Footer link columns have small gaps between links and larger gaps between columns.

A frequent mistake is placing headings exactly halfway between two paragraphs, which makes the heading look like it belongs to neither.

Keep section rhythm steady down the page

Rhythm is the repeating pattern of space as someone scrolls. When every major section has the same top and bottom padding, the page feels calm and predictable. When one section has 40px, the next 120px and the next 60px, the page feels unplanned.

Set one section padding value per screen size from the scale, for instance 48px on mobile and 96px on desktop, and apply it to every full-width section. Exceptions should be rare and deliberate, such as a hero section with extra room, or a thin trust strip with less.

Watch for doubled spacing

If a section has bottom padding and the next section also has top padding, and both contain elements with their own margins, gaps can stack unexpectedly. Decide whether sections own their spacing or the content inside does, and stick to one approach.

Padding inside components

Buttons, cards, alerts, inputs and modals all have internal padding. Consistency here makes the whole interface look like one family.

• Buttons: horizontal padding roughly double the vertical, such as 12px top and bottom with 24px sides.
• Cards: equal padding on all sides, commonly 16px on mobile and 24px on desktop.
• Inputs: match button height where they sit side by side, so a search box and its button align.
• Alerts and notices: the same padding as cards, so they feel related.

How developers keep spacing and padding consistent

Rules on paper drift quickly unless the code enforces them.

1. Define spacing tokens. Store scale values as CSS custom properties such as --space-4 or --space-md, and reference them everywhere instead of raw pixel values.
2. Use a utility framework’s scale. Frameworks like Tailwind CSS ship with a spacing scale; restrict it to the steps your design uses.
3. Build reusable components. A card or section component with spacing built in removes the need for anyone to set it again.
4. Prefer gap in layouts. Flexbox and grid gap keeps spacing between items without margin conflicts on first or last children.
5. Use rem for spacing. Spacing that scales with the root font size stays proportional if visitors enlarge text.
6. Review with an overlay. Browser extensions or DevTools can show element boxes, making irregular gaps visible during code review.
7. Lock down page builders. Where a CMS allows it, limit spacing controls to preset values.

Audit one template this week

Open a service page, inspect the gaps between sections, headings, paragraphs and cards in Chrome DevTools, and write down every distinct value. If the list is long, map each value to the nearest step on your scale and update the stylesheet. For a site built with tokens and components from the start, talk to our website development team, or see pricing for redesign packages.

Frequently asked questions

Should I use a 4px or 8px spacing grid?

An 8px base with 4px available for small adjustments suits most websites. A pure 4px grid offers finer control but more values to choose from, which can reintroduce inconsistency.

How much space should be between sections on a website?

Typical values are around 48px on phones and 80 to 120px on large screens. Consistency across sections matters more than the exact number.

Is padding or margin better for spacing?

Use padding for space inside a component and gap or margin for space between elements. Choosing one clear convention for your project prevents doubled or collapsing spaces.

Do spacing values need to change on mobile?

Large section spacing should shrink on small screens, but small internal spacing inside buttons and cards often stays close to the same, keeping components usable and tap-friendly.