Proximity, similarity, and enclosure suggest which items belong together. Those cues can agree or conflict.
By the end: use relative spacing to express relationships without relying on unnecessary borders.
Read the empty space
Nearby elements tend to be perceived as a group. The useful quantity is often the relation between within-group and between-group spacing, not one sacred pixel value. Six equally spaced items suggest a run of six. A larger central gap suggests two runs of three, even when all items remain unchanged.
Similarity supplies another cue. Equal shapes or repeated text styles suggest common roles. Enclosure can group elements inside a region even when some are farther apart. These are tendencies of perception, not mathematical guarantees about meaning. If proximity says "these belong together" while color says something else, the reader has competing cues.
Measure the gap that expresses a relationship
A gap is the empty distance between two edges, not the distance between their centers. Suppose two square marks are each 20 drawing units wide. If their centers are 32 units apart, subtract the two half widths, ten plus ten, to obtain a 12-unit edge gap. Confusing the two measurements changes the account of what the drawing does. Equal-sized marks make that subtraction simple. With text, visible ink edges vary by letter, so layout boxes and perceived empty space can disagree even when CSS margins match.
The measured marks below separate center distance from edge gap on one numerical scale. Their widths stay 20 units. In the first pair, a 32-unit center distance leaves 12 empty units. In the second, a 68-unit center distance leaves 48 empty units. Only the empty part grows by a factor of four. Center distance grows by 68 divided by 32, or 2.125. Either number can describe a measurement, but only the first matches a claim about a fourfold increase in the gap itself.
Centers and empty gaps are different distances
Numerical drawing at three SVG units per design unit in both rows. Every square is 20 design units wide. Center distances are 32 and 68; subtracting 20 gives empty gaps of 12 and 48. Measurement labels sit away from the marks.
Relative spacing means comparing one gap with another. If the spaces inside a group are 12 units and the space between groups is 48, the between-to-within ratio is four. That ratio does not mean grouping is four times stronger, four times faster to recognize, or four times more likely. It says only that one empty distance is four times the other. Perceptual tendencies motivate inspecting such contrasts, but they do not provide a conversion from a distance ratio into an individual reader's interpretation.
Before using the interactive marks, predict which boundary should become more distinct when only the middle gap increases. The intended split is between items three and four, because that is the boundary whose geometry changes. Nothing new distinguishes items one and two, or five and six. If you describe three groups of two instead, identify what other cue would support that interpretation. This prediction ties the grouping claim to a particular location rather than to a vague feeling that the entire row has become clearer.
The scaled pair below doubles every mark width and every gap. Within gaps change from six to twelve units, while the central gap changes from twenty-four to forty-eight. Both arrangements therefore have the same ratio of four. They differ in overall size and absolute separation. That is why a ratio alone cannot determine whether a label remains comfortably near its content at a particular viewing distance. Real interfaces must also accommodate readable type, available space, and the size of the objects that the gaps separate.
Equal ratios do not mean equal absolute size
Both rows share one numerical scale, 1.5 SVG units per design unit. Upper marks are 20 wide with gaps 6 and 24. Lower marks are 40 wide with gaps 12 and 48. Every dimension doubles; the central-to-ordinary gap ratio remains four.
Try naming the invariant in each comparison. In the first measurement drawing, mark size stays fixed and the gap changes. In the uniformly enlarged drawing, the ratio stays fixed while size and gaps change together. These are different experiments. If a larger version seems easier to inspect, you cannot attribute that difference to a better ratio, because the ratio did not change. You have a possible size effect or another contextual difference to investigate. Explicitly stating what remains constant prevents a geometric explanation from claiming too much.
Attach labels to the right content
A heading should usually be closer to the content it introduces than to the unrelated paragraph above. A field label should be visibly associated with its field. If a divider is the only thing keeping groups legible, consider whether spacing and alignment already express the relationship or could do so more clearly.
The model changes only the central empty gap between two triples. The reference retains equal gaps. Shapes, sizes, and item order remain fixed, so a changed grouping impression cannot be attributed to rewritten labels. The gap ratio is descriptive geometry, not a score predicting perception.
Keep a label closer to its own information
Text introduces a directional relationship that identical marks do not have. A heading announces what follows, while a value answers the label beside it. Placing a heading closer to the paragraph above can suggest the wrong attachment even when the wording is correct. Compare the spaces before and after the heading, but also inspect line height and wrapping. A two-line heading occupies more space than a one-line heading at the same font size. Equal margins do not guarantee equal visible relationships across those two cases.
The workshop specimens below use two headings and two short descriptions with identical words. One puts a large space after each heading and a small space before the next. The other reverses those relations. Ask which description seems attached to 'Wood workshop.' The revised version gives that heading a shorter route to its own description and a larger separation from the preceding description. No border has been added. This intended association does not prove that one margin suits every heading.
Which description belongs to the wood heading?
Large gap after each heading
Glass workshop
Bring a sketch of a small bowl.
Wood workshop
Bring a sketch of a small box.
Large gap between entries
Glass workshop
Bring a sketch of a small bowl.
Wood workshop
Bring a sketch of a small box.
Words and text sizes are identical. The left uses 32 px after headings and 8 px between entries. The right uses 8 px after headings and 32 px between entries, making each heading closer to its own description.
Work through a numerical starting point. A heading has 8 CSS px above and 32 below. The lower gap is four times the upper gap, so the geometry favors closeness to the preceding block. Exchanging those gaps produces 32 above and 8 below. The sum remains 40, which means the change need not consume extra total vertical space at that boundary. This accounting assumes controlled layout gaps, not collapsing HTML margins. Browser rules can otherwise change the resulting spaces.
The menu pair shows the same problem horizontally. A name belongs with its own price, but a price pushed toward the following name can suggest an incorrect pairing. Keeping each pair in a shared row expresses the relationship twice, through proximity and alignment. The price numbers have not changed. Scan the left example for the price of tea, then inspect the revised row. Explain which spatial cue became less ambiguous. Do not credit the revision to lower prices, better wording, or a color distinction that the pair does not use.
Proximity can suggest the wrong price pairing
Misleading inline spacing
Tea3Coffee4Cocoa5
Name and price share a row
Tea
3
Coffee
4
Cocoa
5
The left is an intentionally ambiguous inline run: each price is separated from its own name by 32 px, but from the next name by only 4 px. The right preserves Tea 3, Coffee 4, Cocoa 5 in shared rows. Prices are unchanged; alignment and proximity change together.
Long labels expose a limitation of ideal short examples. If a workshop title wraps, a fixed vertical distance measured from its first line does not describe the distance from its last visible line to the description. Place the heading and its description in one content group that can grow. Keep the larger separation between groups rather than forcing every heading into a fixed-height slot. The principle concerns attachment of complete units. It does not require clipping a longer heading so that all following paragraphs start at identical coordinates.
For a practical exploration, cover the descriptions in the workshop comparison and read just the headings. Then reveal one description and decide which heading owns it based on placement and wording together. If wording alone rescues a weak arrangement, the geometry still deserves inspection. Now imagine both descriptions beginning with the same phrase. A robust association should not depend on distinctive first words. You are testing a possible failure with repeated content, without adding a border or reducing the reading size to force the example into place.
Inspect the relationship
Change only the central gap
Central-to-other gap ratio: 4. The reference stays at 1.
All shapes are identical and item order stays fixed. Gaps are edge-to-edge drawing units; both panels share the same scale. Presets and the slider replace only the central gap. This is not a perception-probability model.
Use the central gap as a controlled experiment
The interactive row fixes each mark's width at 20 drawing units and ordinary edge gaps at 12. The central gap alone can vary between 12 and 64. At the uniform preset, all five gaps match. At the 32-unit preset, the middle gap is 32 divided by 12, about 2.67 times an ordinary gap. At 48, that ratio is four. These calculations describe the displayed construction. They do not supply a threshold at which every observer must switch from seeing one group to seeing two.
Select the uniform preset and identify all five boundaries. Then choose the 32-unit preset and point to the only boundary that changed. Finally select 48 and compare it with the fixed reference. The reference prevents a memory-only comparison of two earlier states. Item order and mark appearance remain the same, so a different grouping impression has a specific spacing change to consider. The control does not change similarity, add labels, or rearrange the marks into a new sequence. Keep those absent mechanisms out of your explanation.
You can verify the width accounting without estimating the image by eye. Six marks use 120 units of ink width. At uniform spacing, five 12-unit gaps use another 60, giving a 180-unit span from first edge to last edge. With a 48-unit central gap, four ordinary gaps use 48, and the central one adds 48. The total becomes 216 units. The row grows by 36 units, exactly the increase from the old central gap of 12 to the new central gap of 48.
The width-budget drawing shows this arithmetic on a shared numerical scale. A longer selected row does not mean the marks grew. Its added width is entirely empty space in the middle. Consider a constrained page. Enlarging a gap can push content beyond an available width, even though no text or object changed size. A spacing proposal must therefore consider both the relationship it expresses and the space it consumes. Perception and fit are separate questions about the same proposed arrangement.
Extra span comes from one empty gap
Common numerical scale of 2.5 SVG units per design unit. Uniform span is 6 × 20 + 5 × 12 = 180. Selected span is 6 × 20 + 4 × 12 + 48 = 216. First edges align; the 36-unit growth is entirely the increased central gap.
Explore an intermediate value with the slider after predicting the result. For example, a 24-unit central gap has a ratio of two and adds 12 units to the uniform row's span. Check those calculations against the model's displayed ratio and visible spacing. Decide whether your own grouping impression differs from the uniform case, but report that as your impression in this context. A single observer's experience with already explained marks cannot establish a population probability or a general usability improvement for headings, menus, or real forms.
The similarity conflict below changes a different variable in a separate static example. A large middle gap suggests two triples, while repeated shapes suggest alternating categories across the row. Both descriptions can be useful at once. An inventory might group items by location while also marking item type. Conflict becomes a problem when the intended task requires one association and the cues suggest another. Do not conclude that similarity always defeats proximity, or the reverse. First decide which relationship the design needs the reader to recover.
Spacing and shape can express different relationships
Schematic grouping example, not a perception score. The central gap suggests two triples. Repeated squares and circles suggest categories that cross that boundary. The reference keeps all marks square. Order and gap geometry match; shape similarity changes.
Do not confuse compactness with clarity
Removing every gap saves area but can erase relationships. Excess space can also detach a label from its value and require unnecessary scanning. Keep related units together, then separate those units according to the task. A menu item and its price may need a shared row more than a surrounding card.
Reading direction and writing system matter. These examples use left-to-right Latin text, not a universal prescription for all scripts. Preserve semantic grouping in markup too. A visible field label still needs a programmatic association for users who do not perceive the page visually.
Make groups survive longer text and another reading order
Compactness is a width or height result, not a complete description of clarity. Reducing a heading's gap from its paragraph can strengthen their attachment while saving space. Reducing the gap between two independent workshop entries can instead blur their boundary. The same numerical reduction therefore has different consequences depending on which relationship it changes. Treat each workshop as a unit before compressing the list. Its heading and description should stay associated, and the separation between workshops should remain distinguishable from the spacing inside them.
The compact and separated workshop lists below preserve the same text at the same reading size. Inspect the boundary after the first description. In the compact list, that boundary gets little more separation than content inside an entry. In the separated list, additional space marks a new workshop without enclosing it in a box. Decide whether that difference would still be visible if the descriptions became two lines longer. The useful question concerns the group's boundary, not whether one entire list occupies fewer pixels than the other.
Compactness can erase the boundary between entries
8 px between workshops
Glass workshop
Bring a sketch of a small bowl.
Wood workshop
Bring a sketch of a small box.
32 px between workshops
Glass workshop
Bring a sketch of a small bowl.
Wood workshop
Bring a sketch of a small box.
The same titles and descriptions use identical text size. Both keep an 8 px heading-to-description gap. Only the gap between complete workshop entries changes, from 8 px to 32 px. Neither version removes information.
Enclosure can make a group explicit when spacing alone competes with other nearby material. A region around an entire workshop can connect a distant title and booking statement. But a border around every separate line would divide the very unit you meant to assemble. Look at the enclosed entry below and name exactly what the border includes. It includes both the title and its condition. A border placed between them would communicate a different structure, despite using the same stroke color and thickness on the page.
Visual grouping also has a nonvisual counterpart. A semantic list can expose each workshop as an item, with its description inside that item, even when borders are absent. A page that reads all headings first and all descriptions afterward may look grouped in two columns but lose the pairing when presented linearly. WCAG's meaningful-sequence criterion concerns a programmatically determinable order when sequence affects meaning. It does not demand one order for independent content. These specimens do not establish whole-interface conformance.
Read the paired workshop specimen in a single sequence, title followed by description for each workshop. Then imagine reading both titles before either description. With repeated or similar descriptions, the second sequence makes the reader reconstruct ownership. Keeping each unit together in the source avoids depending on visual coordinates to repair that relationship. Keyboard focus order needs its own check when groups contain controls. Merely moving a booking action with CSS does not prove that focus moves beside the workshop that appears to contain it.
For a final transfer, choose the longer workshop entry below and identify which spaces should expand if another sentence is added. Space inside the description grows with its text; the next workshop should move downward rather than overlap it. The short heading-to-description gap and larger between-workshop gap can remain the same. This preserves relationships without fixed heights, miniature text, or a new divider for each line. It is a layout proposal to verify with real wrapping, not a schematic guarantee about every font, language, or enlarged-text setting.
A group can grow without losing its boundary
Spacing groups complete entries
Glass workshop
Bring a sketch of a small bowl. The sketch can include a handle. Paper is available at the studio.
Booking required
Wood workshop
Bring a sketch of a small box.
Booking required
Enclosure groups complete entries
Glass workshop
Bring a sketch of a small bowl. The sketch can include a handle. Paper is available at the studio.
Booking required
Wood workshop
Bring a sketch of a small box.
Booking required
Both lists contain identical longer glass-workshop text and the same booking conditions. The left uses spacing alone; the right encloses each complete workshop. These are live HTML blocks with natural height, not a miniature reflow schematic or a conformance test. The next entry follows the entire preceding entry.
Exercises
Repair a detached heading
A heading has 8 px of space above and 32 px below before its paragraph. Why might it seem attached to the preceding paragraph? Propose a first change.
Hint
Compare the gaps on the two sides of the heading.
Worked answer
Previous paragraph
Next heading
Its own paragraph
8 px above, 32 below
Previous paragraph
Next heading
Its own paragraph
32 px above, 8 below
The heading is closer to the content it introduces in the revised example.
Gap
Before
Proposed
Above heading
8 px
32 px
Below heading
32 px
8 px
The relationship changes without adding a border.
The heading is much closer to the preceding content. Try a larger gap above, such as 32 px, and a smaller gap below, such as 8 px. This supports the intended association while retaining room between sections. It is a starting hypothesis; test the actual font, line height, and surrounding material.
Resolve conflicting cues
A price list puts each price nearer the next item's name than its own. Alternating colors identify intended rows. Is color enough?
Hint
Consider a reader who cannot distinguish those colors.
Worked answer
Cue
Needed change
Proximity
Bring each price near its own item
Alignment
Give each pair one shared row
Color
Supplement, not sole association
The same relationship should survive without color.
No. Restore row alignment and proximity, then use color only as a supplementary cue if useful. Keep each name and price in the same semantic row. Repeating a background stripe cannot reliably repair geometry that suggests the wrong pairing.
Sources and further reading
These optional references support the stated mechanisms and technical criteria. Selected relevant passages were reviewed. The notices, diagrams, and numerical examples are original teaching comparisons, not empirical usability results. Design hypotheses need tests with intended readers; technical checks do not establish aesthetic quality or whole-site conformance.