Too much whitespace severs elements that should stay related

What it is

A label 40 px above its field reads as leftover copy from the previous section, not as this field’s name. A product card that uses space-between to park the price 80 px under the title makes the price look like a page footer. A fat seam between a photo and its caption hands the caption to the next article as a heading.

Empty works in both directions. An oversized gap is a “new group starts” signal, and a semantic protest will not override it.

Why it happens

Proximity has no semantic appeals court. Once a gap exceeds the distance from that object to an unrelated neighbour, the visual system reassigns belonging. A frequent pusher is flex distributing leftover space into the wrong seam: the card is stretched tall, the middle gap grows first, and title and price are sent to opposite ends.

After the cut, people mis-pair: caption to the previous image, price to the next card, label to the field above. Drawing a line to “circle them back” admits the empty already sent the opposite signal, and adds ink.

Where it stops holding

Covers, chapter opens, ceremonial first screens may cut on purpose: a large gap between title and body means “it starts now.” That is narrative, not a form. In a large gallery, air between images is immersion, so long as each caption still hugs its own image.

Pushing a primary button into the thumb’s arc on a small screen by leaving a cavern above it severs the button from the copy it belongs to. Fix that with scroll or a sticky bar, not a spatial divorce.

Applying it

• Inventory pairs: label–control, image–caption, title–price, error–field. Each pair’s gap must be smaller than either member’s gap to the next unrelated object.
• Do not use space-between (or equivalent flex) to stretch a related pair. Leftover height goes between groups, or the card does not grow to fill.
• How to check: on device, finger-measure each related seam, then the seam to the next unrelated object. If the former is larger or a tie, it is a cut. Tighten the pair until it binds in a glance, then see whether the card got shorter — shorter usually means the empty was flex leftover, not grouping.

Related

• Same group: F2.04.1 Whitespace groups; it is not leftover finish · F2.04.2 Too little whitespace makes every element look like one group
• Nearby: F2.06 Proximity grouping · F1.01 Distance between control and its target · F3.09 Position and hierarchy
• Search terms: orphaned label · excess whitespace · space-between · caption grouping