Skip to Content
Law of UX · Law of Proximity

Group With Spacing

#gap / marginproximity

Use gap and margin so related elements feel grouped and hierarchy is clear without extra borders.

Why it works: Law of Proximity — objects that are near each other are perceived as grouped; gap and margin encode hierarchy.

live_demo
code
.proximity-group.spaced {
  gap: 24px;
}

.proximity-group.spaced .cluster + .cluster {
  margin-top: 16px;
}