Whitespace
Before borders, cards or dividers, space is how you group things. We read elements that sit close together as one unit and elements that sit apart as separate ones. When every gap is the same, nothing belongs to anything.
Gaps inside a group should be about half the gaps between groups, or less.
With equal spacing, each label is 16px from its own field and 16px from the field above it, so it belongs to neither. The grouped version uses three gaps: 8px from label to field, 16px between fields and 32px between sections. Each level doubles the last, and that is enough for the eye to read the structure without a single line.
Headings belong below
A heading names what comes after it, so it should sit closer to that content. Give it about twice as much space above as below. In the demo, Notifications has 32px above it and 16px below.
Space before lines
Dividers and cards are the usual fix for a layout that reads as one long list. They work, but often they are doing a job the spacing should have done. Remove the lines and see what is left.
On the left, every row is 12px apart and the dividers carry all the grouping. Without them it is five equal rows. On the right, the lines are optional. Get the spacing right first, then add a line or a shadow only where it still helps.
Squint
Blur a layout, or squint at it, and the text turns into blocks. Good spacing leaves a few clear clusters. Equal spacing leaves a ladder of stripes.
It is the same blur test as in optical alignment, applied to a whole screen.
Usage
Put the spacing on the parent with gap, one container per group. The
nesting in the markup then matches the grouping on screen.
<form class="flex flex-col gap-8">
<section class="flex flex-col gap-4">
<h2>Profile</h2>
<label class="flex flex-col gap-2">
Name
<input />
</label>
<label class="flex flex-col gap-2">
Email
<input />
</label>
</section>
<section class="flex flex-col gap-4">...</section>
</form>form,
section,
label {
display: flex;
flex-direction: column;
}
form {
gap: 32px;
}
section {
gap: 16px;
}
label {
gap: 8px;
}Padding counts as space too. A 32px menu item with a 16px line of text already has 8px of padding above and below it, so a 4px gap between groups barely shows. Compare the space between the text, not between the boxes. The values themselves come from a spacing scale.
Resources
Proximity Principle in Visual Design - Nielsen Norman Group on why things that sit close together read as one group.
Law of Proximity - A one-page summary of the principle with its origins and takeaways.
gap - The property that puts spacing on the group instead of on each child.