Spacing elements without margin hacks
The old way used margins on children and negative margin on the container, or :last-child to cancel the last margin. Gap handles it on the parent.
2 display: flex;
3 gap: 16px;
4}
2 display: flex;
3}
4
5.grid > * {
6 margin-right: 16px;
7}
8.grid > *:last-child { margin-right: 0; }
Browser Support for gap
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2021.
Your first month is free
Managed WordPress hosting for faster sites.
No edge cases
Gap only goes between items. No need to zero out the last child or use negative margins.
Parent controls spacing
One value on the container. Add or remove children, spacing stays consistent.
Flex and grid
Same gap property works for both. Row and column gap available too.
How it works
The old pattern was margin on every child (e.g. margin-right: 16px) and then a :last-child rule to set margin to 0 so the last item didn't add extra space. Or you used negative margin on the container to absorb the last child's margin. Both are fiddly.
With display: flex or grid and gap: 16px, the browser adds space only between items. No child margins, no overrides. Works the same for rows and columns, and you can use row-gap and column-gap separately if needed.