How much white space should you use around text?

White space around text should grow with the size of the thing it separates: small gaps inside a block of text, larger gaps between blocks, and the largest gaps between sections. A practical starting point for body text is a line height of about 1.5, roughly one line of space between paragraphs, at least 1rem of padding between text and the edge of any container or screen, about two to three lines of space above a section heading, and four to six lines between major page sections. Keep lines to around 45 to 75 characters so the space beside the text column is generous too. The exact numbers matter less than the relationships: related items should be closer together than unrelated ones, and every gap should come from the same small scale.

White space isn't empty space. It's what tells readers which pieces of text belong together, where one idea ends and the next begins, and where to look first. Too little and a page feels cramped and hard to scan; too much and related content drifts apart. In this article you'll learn the difference between micro and macro white space, the spacing values that work for each level of a page, how to pad text inside cards, buttons and forms, how to make spacing scale across screen sizes, and how to check that your layout still works when readers adjust text spacing themselves.

Micro and Macro White Space

It helps to think about white space at two scales.

• Micro white space: The space within text, such as letter spacing, word spacing, line height and the gaps between paragraphs and list items. It mostly affects readability.
• Macro white space: The space around and between blocks, such as margins around a text column, padding inside cards, gutters between columns and the gaps between page sections. It mostly affects structure and focus.

Both work together. A page with comfortable line height but no breathing room around the text column still feels cramped. A page with generous section spacing but tight lines is hard to read once you start.

The Principle: Proximity

The Gestalt principle of proximity says that we see items that are close together as a group. Spacing is the main tool for showing structure, ahead of borders, backgrounds or rules.

A simple test: the space inside a group should always be smaller than the space around it. Concretely:

1. Space between lines of a paragraph is smaller than space between paragraphs.
2. Space between paragraphs is smaller than space above a heading.
3. Space below a heading is smaller than space above it, so the heading attaches to its section.
4. Space above a section heading is smaller than space between major page sections.

If any of these is reversed, readers will group content wrongly, and the page will look slightly confusing even if they can't say why.

Spacing Inside Text

Line Height

Line height is the first and smallest level of white space. For body text on the web, values between 1.4 and 1.6 suit most fonts. Fonts with a large x-height, or long line lengths, need the higher end; short lines and fonts with a small x-height can go lower.

body {
  font-size: 1rem;
  line-height: 1.5;
}

h1, h2, h3 {
  line-height: 1.15;
}

Headings get a tighter line height because they're larger and usually short. A 40px heading at 1.5 has 60px lines, which makes a two-line heading look like two separate headings.

Paragraph and List Spacing

The gap between paragraphs is usually about one line height, so 1.5rem with the settings above. That's enough to separate paragraphs clearly without breaking the flow of reading. List items inside a list need much less, often a quarter to half a line, so the list reads as one unit. For a full discussion, see how to choose the right paragraph spacing.

p,
ul,
ol {
  margin-block: 0 1.5rem;
}

li + li {
  margin-block-start: 0.5rem;
}

Spacing Around Headings

Headings are where most layouts get spacing wrong. They often have equal space above and below, which leaves them floating halfway between two sections. Give them roughly two to three times as much space above as below:

h2 {
  margin-block: 3rem 1rem;
}

h3 {
  margin-block: 2.25rem 0.75rem;
}

This keeps each heading visually tied to the content that follows it. If a heading follows another heading directly, reduce the space between them so they read as a pair:

h2 + h3 {
  margin-block-start: 1rem;
}

Spacing is also part of how readers judge importance. A heading with more space around it looks more significant even at the same size, which is one reason spacing and size should be considered together when you build visual hierarchy.

Space Beside the Text Column

The space on either side of a text column is macro white space, and it's controlled mostly by line length. Body text is most comfortable at around 45 to 75 characters per line, with about 65 a good default. On a wide screen that leaves plenty of space beside the column, and that space is a feature, not waste.

.prose {
  max-width: 65ch;
  margin-inline: auto;
  padding-inline: 1rem;
}

The ch unit is based on the width of the 0 character in the current font, so 65ch gives roughly 65 characters of average text. The padding-inline guarantees space between the text and the edge of the screen on small devices, where the max width doesn't apply.

How Much Padding at the Screen Edge

On phones, 16px (1rem) of padding on each side is a common minimum, and 20 to 24px often looks better. Less than that and text appears to run into the edge of the device, especially on phones with curved screens. A fluid value handles all sizes:

.page {
  padding-inline: clamp(1rem, 5vw, 3rem);
}

This gives at least 1rem on narrow screens, grows with the viewport, and stops at 3rem on wide ones.

Padding Text Inside Containers

Any time text sits inside a box with a background or border, it needs padding. Text that touches or nearly touches the edge of a coloured box is one of the most common spacing faults.

Cards and Callouts

A good rule is that padding should be at least as large as the line height of the text inside, and often larger:

.card {
  padding: 1.5rem;
  border-radius: 0.5rem;
  background: var(--surface);
}

.card > :first-child {
  margin-block-start: 0;
}

.card > :last-child {
  margin-block-end: 0;
}

The last two rules remove the margins of the first and last child, so the space at the top and bottom of the card is exactly the padding. Without them, a paragraph's bottom margin adds to the padding and makes the bottom of the card look heavier than the top.

Keep padding similar on all sides for small cards. For wide callouts, slightly more horizontal than vertical padding often looks more balanced.

Buttons

Button text needs space around it to look clickable and to give a comfortable touch target. Horizontal padding is usually about twice the vertical padding:

.button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;     /* 44px at default settings */
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  line-height: 1.25;
}

The minimum height of 44px follows Apple's long-standing touch target guidance. WCAG 2.2 Success Criterion 2.5.8 Target Size (Minimum), at level AA, sets a lower floor of 24 by 24 CSS pixels, with exceptions, so 44px gives comfortable headroom.

Form Fields and Labels

Labels should sit close to the field they describe and further from the previous field. If the gap between a label and its own input is the same as the gap to the input above, users can't tell which is which.

.field {
  margin-block-end: 1.5rem;
}

.field label {
  display: block;
  margin-block-end: 0.375rem;
}

.field input {
  padding: 0.625rem 0.75rem;
}

Space Between Page Sections

Major sections of a page, such as a hero, a feature list and a testimonial block, need the most space. Four to six body line heights is a typical range on desktop, reduced on mobile. A fluid value handles this neatly:

.section {
  padding-block: clamp(3rem, 8vw, 6rem);
}

That's 48px on small screens, growing to 96px on wide ones. If sections have different background colours, the colour change already separates them, so you can often use the lower end of the range. If they share a background, they need the full amount.

Build a Small Spacing Scale

All of these values become easier to manage as a scale. Instead of choosing new numbers for every component, choose from a short list:

:root {
  --space-3xs: 0.25rem;  /* 4px  */
  --space-2xs: 0.5rem;   /* 8px  */
  --space-xs: 0.75rem;   /* 12px */
  --space-s: 1rem;       /* 16px */
  --space-m: 1.5rem;     /* 24px */
  --space-l: 2rem;       /* 32px */
  --space-xl: 3rem;      /* 48px */
  --space-2xl: 4.5rem;   /* 72px */
  --space-3xl: 6rem;     /* 96px */
}

Map each level of structure to a step:

Relationship	Suggested step
Between list items	--space-2xs
Label to field	--space-2xs
Below a heading	--space-xs to --space-s
Between paragraphs	--space-m
Card padding	--space-m
Above a section heading	--space-xl
Between page sections	--space-2xl to --space-3xl

Each step is noticeably larger than the last, which keeps the proximity relationships clear.

Test With User Text Spacing

Readers can override your spacing with browser extensions or user stylesheets, and your layout should survive it. WCAG 2.2 Success Criterion 1.4.12 Text Spacing, at level AA, requires that no content or functionality is lost when users set:

• Line height to at least 1.5 times the font size.
• Spacing after paragraphs to at least 2 times the font size.
• Letter spacing to at least 0.12 times the font size.
• Word spacing to at least 0.16 times the font size.

You can test this by pasting the following into the browser console:

const style = document.createElement("style");
style.textContent = `
  * {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
  }
  p {
    margin-bottom: 2em !important;
  }
`;
document.head.append(style);

Look for text that overflows its container, overlaps other text, or is clipped by fixed heights. The usual cause is a fixed height on a card or button; replacing it with min-height and padding fixes most problems.

---

FAQ: White Space Around Text

---

Conclusion

The right amount of white space around text depends on what you're separating. Use small gaps within text, about one line between paragraphs, clearly more above headings than below them, at least 1rem of padding between text and any edge, and the largest gaps between page sections. Keep the text column to a comfortable line length, and the space beside it will take care of itself.

Rather than picking values one component at a time, build a short spacing scale and map each level of structure to a step. Check that related items are always closer together than unrelated ones, test with WCAG's text spacing overrides, and replace fixed heights with padding wherever text lives. That combination gives you layouts that feel open, organised and easy to read on every screen.