How to choose the right paragraph spacing?

To choose the right paragraph spacing, start from your body line height and set the gap between paragraphs to roughly the same value, so with 16px text and a 1.5 line height, a gap of about 24px (1.5rem). That's large enough to show clearly where one paragraph ends and the next begins, but small enough that the text still reads as one continuous piece. Go a little larger, up to about 1.5 times the line height, for dense or technical content and for readers who benefit from extra separation; go smaller, around half a line, in compact interfaces. The alternative is the print convention of indenting the first line of each paragraph with no gap, which suits long-form reading. Whichever you choose, use one method consistently and never both at once.

Paragraph spacing looks like a minor setting, but it shapes how a page feels more than almost any other single value. Too tight, and paragraphs merge into a wall of text; too loose, and the page feels like a list of disconnected statements. In this article you'll learn how paragraph spacing relates to line height, when to use space and when to use indents, what WCAG says about it, how to implement it cleanly in CSS without margin surprises, how to handle different contexts, and how to set it in WordPress and component-based sites.

Why Paragraph Spacing Matters

A paragraph is a unit of thought. Its visual edges tell readers that one idea is complete and a new one is starting. That boundary helps in three ways:

• Scanning: Readers skim by jumping from the start of one paragraph to the next. Clear gaps make those starting points easy to find.
• Pacing: A visible pause between paragraphs gives the reader a natural moment to absorb what they've just read.
• Returning: If a reader looks away and comes back, distinct paragraphs make it easier to find their place.

On screens, where people scroll and skim more than they do with print, these benefits are larger. That's one reason the web adopted spaced paragraphs as the default rather than indented ones.

Start From Line Height

Paragraph spacing should always be judged against line height, because the gap between paragraphs has to be visibly larger than the gap between lines. If a 16px paragraph has a 24px line height and an 8px paragraph gap, the extra space is only 8px on top of the normal leading, and paragraph breaks become easy to miss.

A useful way to think about it is in "lines":

Paragraph gap	With 16px text, 1.5 line height	Feel
0.5 line	12px (0.75rem)	Compact, suits UI text and short notes
0.75 line	18px (1.125rem)	Slightly tight, fine for short articles
1 line	24px (1.5rem)	Balanced, a strong default
1.25 lines	30px (1.875rem)	Airy, good for dense or technical prose
1.5 lines	36px (2.25rem)	Very open, suits accessibility-focused layouts

One line is a good default because it keeps the page on a consistent rhythm: every vertical position is a multiple of the line height. Going beyond 1.5 lines usually separates paragraphs so much that the text stops reading as a whole.

:root {
  --body-size: 1rem;
  --body-leading: 1.5;
}

body {
  font-size: var(--body-size);
  line-height: var(--body-leading);
}

p {
  margin-block: 0 1lh;  /* one line of the paragraph's own line height */
}

The lh unit equals the computed line height of the element, so 1lh stays exactly one line even if you change the font size or line height later. It's supported in current versions of all major browsers. For older ones, add a fallback in rem before it.

Space or Indent: Choosing a Method

There are two established ways to mark paragraphs.

Block Paragraphs (Space Between)

This is the web default: no indent, a gap between paragraphs. It's clear, it suits scanning, and it works well with headings, images and lists mixed into the text.

.prose p {
  margin-block: 0 1.5rem;
}

Indented Paragraphs (No Space)

This is the long-standing book convention: no gap between paragraphs, and the first line of each paragraph indented. It keeps the text block solid and even, which suits fiction, essays and other long, continuous reading.

.prose p {
  margin-block: 0;
}

.prose p + p {
  text-indent: 1.5em;
}

The adjacent sibling selector (p + p) applies the indent only to paragraphs that follow another paragraph. The first paragraph after a heading, image or list isn't indented, because there's nothing above it to separate from. This follows traditional typesetting practice.

An indent of about 1 to 1.5em, roughly the line height, is typical. Larger indents look clumsy; smaller ones get lost.

Never Use Both

Spacing and indenting together is redundant: each one alone already marks the paragraph. Doing both creates gaps and notches that make the text look broken. Pick one method for each kind of content and apply it everywhere.

Content type	Suggested method
Blog posts and articles	Space between
Documentation and help pages	Space between
Marketing pages	Space between
Fiction and long essays	First-line indent
Digital editions of print books	First-line indent
Legal text with numbered clauses	Space between

What WCAG Says

Two WCAG 2.2 success criteria mention paragraph spacing.

• 1.4.8 Visual Presentation (AAA): For blocks of text, a mechanism should be available so that paragraph spacing is at least 1.5 times larger than the line spacing. With 1.5 line spacing, that suggests a total distance between the last line of one paragraph and the first line of the next of at least 2.25 times the font size.
• 1.4.12 Text Spacing (AA): Content must not be lost or broken when users increase spacing after paragraphs to at least 2 times the font size, along with increased line, letter and word spacing.

The first criterion is AAA, so it isn't required for most sites, but it's a useful benchmark if your audience includes people with low vision or reading difficulties. The second is AA, and it's mainly a test of whether your layout is flexible: if users increase paragraph spacing and a fixed-height card cuts off its text, that's a failure.

A generous default in line with the AAA guidance:

.prose {
  font-size: 1.125rem;
  line-height: 1.5;
}

.prose p {
  margin-block: 0 1.5em; /* 1.5 x 1.125rem = 27px gap */
}

Here the distance from the baseline of the last line of one paragraph to the baseline of the first line of the next is 3em (1.5em of leading plus a 1.5em margin), twice the normal line spacing.

Implement It Without Margin Surprises

Vertical margins between blocks in normal flow collapse: when a paragraph with a 24px bottom margin is followed by one with a 24px top margin, the gap is 24px, not 48px. That's helpful for paragraphs but confusing elsewhere.

Three rules keep things predictable:

1. Put the margin on one side only: Bottom margin on every block, or top margin on every block except the first. Don't mix them.
2. Trim the first and last child of containers: Otherwise the first paragraph's top margin or the last paragraph's bottom margin leaks out of the container, or adds to its padding.
3. Remember flex and grid don't collapse margins: Inside a flex or grid container, margins add up. Use gap there instead.

.prose > * {
  margin-block: 0;
}

.prose > * + * {
  margin-block-start: var(--flow-space, 1.5rem);
}

This sets space above every child except the first, which also leaves nothing hanging at the bottom. Individual elements can change the gap with --flow-space:

.prose > h2 {
  --flow-space: 3rem;
}

.prose > h2 + p {
  --flow-space: 0.75rem;
}

In flex or grid layouts, gap is cleaner still:

.stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

rem or em?

• rem makes every paragraph gap the same size regardless of the paragraph's font size. Use it when you want a consistent rhythm across the page.
• em or lh scale with each paragraph's font size. Use them when small print, captions or lead paragraphs should have proportionally smaller or larger gaps.

Both respect the reader's default font size, unlike px.

Adjust for Context

One value won't suit every part of a site.

• Lead paragraphs: An introductory paragraph set larger than body text needs a proportionally larger gap. Using em handles this automatically.
• Captions and footnotes: Small text with short blocks can use about half a line between paragraphs.
• Cards and interface panels: Space is limited, and paragraphs are short. Around 0.75rem often works better than a full line.
• Narrow mobile columns: Lines are shorter, so paragraphs are taller. Keep the same gap as desktop; don't shrink it, or long paragraphs blend together.
• Email: Many email clients apply their own paragraph margins or strip CSS from the head. Set margins inline on each paragraph, for example style="margin: 0 0 16px;".

Setting Paragraph Spacing in WordPress

In block themes, paragraph and block spacing is controlled by theme.json. The blockGap setting defines the space between blocks in the content flow, which includes paragraphs:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "spacing": {
      "blockGap": true,
      "units": ["px", "em", "rem", "%"]
    }
  },
  "styles": {
    "spacing": {
      "blockGap": "1.5rem"
    },
    "typography": {
      "fontSize": "1.125rem",
      "lineHeight": "1.6"
    }
  }
}

WordPress generates CSS that applies this gap as a top margin between sibling blocks, so you don't need to add margins to paragraphs yourself. Setting blockGap to true in settings lets editors adjust the gap on group blocks in the editor. In classic themes, set paragraph margins in your stylesheet as normal, scoped to the content area, for example .entry-content p.

---

FAQ: Paragraph Spacing

---

Conclusion

The right paragraph spacing is anchored to your line height. Around one line of space between paragraphs is a dependable default for web content, with a little more for dense or accessibility-focused reading and a little less for compact interface text. For long, continuous reading, a first-line indent of about 1 to 1.5em with no gap is a well-proven alternative, but never combine the two.

Implement spacing on one side of each element, trim margins at the edges of containers, use gap in flex and grid layouts, and choose rem for a consistent rhythm or em and lh when gaps should follow each paragraph's size. Check the result against WCAG's text spacing criteria, and your paragraphs will be clearly separated, easy to scan and comfortable to read.