A gap below a header can appear even when neither the header nor the next container has a margin. The heading inside the header may have a default bottom margin that collapses outside its parent. When adjoining top or bottom margins collapse, they overlap instead of adding together; the largest joined margin determines the resulting space. section 3.5 section 3.5.3 section 3.5.1
Two text blocks, one gap
Two paragraphs with default 1em top and bottom margins have a 1em gap, not 2em. Likewise, a heading with a 19.92px bottom margin followed by a paragraph with a 16px top margin produces a 19.92px gap. Wrapping that paragraph in an otherwise unstyled div does not necessarily change the result: the heading, div, and paragraph margins can all join. section 3.5.1 section 3.5.2
Listing 3.10 Paragraph wrapped in a div, with the same result
<main class="main">
<h2>Come join us!</h2>
<div> #1
<p> #1
The Franklin Running club meets at 6:00pm #1
every Thursday at the town square. Runs
are three to five miles, at your own pace.
</p>
</div>
</main>
The paragraph’s wrapper adds markup without separating its margin from the heading’s margin. section 3.5.2
This can be useful for text: headings retain their intended following space whether the next block has a smaller top margin or none. It can also be surprising. A heading’s margin may collapse through its header, leaving a gap outside the colored background rather than adding space inside it. Even an empty, unstyled div with no height, border, or padding can have its top and bottom margins collapse. In ordinary horizontal writing, this behavior concerns top and bottom margins, not left and right margins. section 3.5.2 section 3.5.3
When spacing lands in the wrong place, choose the rule that matches the layout:
- For space inside a container, use padding and remove an unwanted child margin. Padding or a border between margins stops them collapsing; overflow: auto on the container also prevents its inside margins from collapsing with outside ones. section 3.5.3
- For a series of buttons inside a padded container, avoid a top margin on every button: the first margin adds to the container’s top padding. Apply margin-block-start only to a button immediately following another button, using .button-link + .button-link. section 3.6
- For measured text spacing, account for line height as well as margins. Margins on a heading and following paragraph can overlap while the visible gap also reflects space around their text. section 12.1.2
When a container has unexpected space above or below it—or its text seems pressed against an edge—check adjoining margins before changing the container’s dimensions. section 3.5.3
