Law of proximity

One of the Gestalt grouping principles catalogued by Max Wertheimer in the 1920s: objects near each other are perceived as one group, whatever they actually are. In interface terms, distance is one of your strongest grouping signals, and on a plain page it usually beats colour, borders, and background panels. It is not unbeatable: a shared container or a connecting line can pull two far-apart items into one group. But a form label three pixels from the wrong field belongs to the wrong field, and no styling will argue people out of it.

The working rule is that space outside a group must beat space inside it, usually by roughly double. Label 8px above its input, 32px between fields. Caption 8px under its image, 48px before the next section. Heading closer to the paragraph it introduces than to the paragraph above it. Get that ratio right and most layouts stop needing dividing lines at all.

Gotcha: when a screen feels confusing, the instinct is to add cards, borders, and background tints. That is usually a patch over uniform spacing. Fix the gaps first and the boxes become unnecessary. Second gotcha: proximity outranks the heading. A section title with equal space above and below floats between two sections and gets attached to the wrong one, which is the single most common spacing bug in long pages.