When grid cells or flex items sit too close together, use `gap` on their container to add space between them. The space goes between items or grid tracks, not around the outside edge. Use `padding` or `margin` when the container also needs space at its edges. section 2.4.2 section 6.7.2
`gap` is shorthand for `row-gap` and `column-gap`. One value sets both; with two values, the first sets the row gap and the second sets the column gap. For example, `gap: 20px` gives a grid 20-pixel gutters in both directions. The default `normal` acts like `0px` here; in CSS multi-column layout, it acts like `1em`. Older CSS may use the name `grid-gap`, but `gap` is recommended. section 2.4.2
Space out a grid of cards
Start with cards stacked in a grid on a narrow screen, then add `gap: 1rem` to their `main` container. The cards stay stacked, but a consistent space appears between them. The same idea works in a two-column description list: `gap: .5rem` spaces its grid contents, while `padding: 0 1rem` supplies space at the container’s sides. section 5.2.1 section 8.3.2
Keep flex items apart
For a row of profile statistics, `display: flex; justify-content: space-around; gap: 12px` spreads the groups out while ensuring at least 12 pixels between them. `space-around` also leaves space at the edges; `gap` does not. A flex button can likewise use `gap: 1ch` between its icon and label. section 6.7.2 section 11.5.1
The profile-statistics rule shows `gap` working alongside `justify-content: space-around` rather than replacing it. section 6.7.2
