Back to anti-patterns
collapsed-spacing
Collapsed Spacing
Content touches a visible border, peer items stick together, or responsive wrapping removes the separation needed to read grouping and hierarchy.
Anti-patternsRecommended
Intent
Make breathing room an explicit layout relationship instead of an accidental result of margins, intrinsic width, or leftover container space.
Checks
- Inspect every bordered or filled surface for intentional content inset on each occupied edge.
- Inspect vertical stacks, control clusters, wrapped rows, card grids, labels, and actions for explicit row and column gaps.
- Verify focus rings, shadows, selected outlines, and validation messages do not touch or clip against neighboring content.
- At mobile breakpoints, step down the spacing scale without collapsing ordinary relationships to zero.
Warnings
- A layout can avoid overlap and still feel broken when content is visually glued to its border or neighbor.
Exceptions
- Intentional seams are valid for segmented controls, tables, tiled media, continuous rules, and edge-to-edge crops.