Spacing

A heading's meaning is partly determined by what sits closest to it. Not by font size. Not by semantic HTML. By proximity. The law of proximityA principle from Gestalt psychology: elements placed close together are automatically perceived as belonging to the same group, before any reading takes place., a core GestaltA school of perceptual psychology that studies how the mind organizes visual elements into unified wholes. Key principles include proximity, similarity, continuation, and closure. principle, holds that elements near each other are perceived as related.

Margin is grouping. More space above a heading than below it ties the heading to the content that follows. Equal margins, or tighter above than below, leave the heading adrift between two unrelated blocks.

Drag the margin above the heading. At 0.25em, the heading visually merges with the paragraph above. Your eye reads them as one unit. At 1.5em and above, the heading claims the section below. You feel the grouping shift before you read a word.

The standard pattern: generous top margin, tight bottom margin. The heading looks forward, not backward.

Symmetric margins, 1.5rem both ways, create the same problem in reverse: the heading floats between blocks. It doesn't introduce security settings; it interrupts the billing copy above.

ProximityA principle from Gestalt psychology: elements placed close together are automatically perceived as belonging to the same group, before any reading takes place. grouping is automatic and preattentiveProcessed by the visual system before conscious attention engages, registered in under 200ms, before any reading occurs. Spacing is a preattentive cue that overrides semantic structure.. Wrong spacing overrides semantic HTML. A <h2> with tight top margin still reads as a continuation of the previous section, regardless of its tag.

h2, h3 {
margin-top: 2em;
margin-bottom: 1em;
}

h2 + p,
h3 + p {
margin-top: 0;
}

h2, h3 {
margin-top: 2em;
margin-bottom: 1em;
}

h2 + p,
h3 + p {
margin-top: 0;
}