CSS

`css/gap-over-margins`

Space the children of a flex or grid container with gap, not with margins on the children and last-child exceptions.

Why

Margins on children need an exception for the first or last item, double up when items wrap, and leak out of the component. gap puts space only between items, in both directions, and is supported for flexbox and grid in every current browser.

Fix

Set gap (or row-gap/column-gap) on the flex or grid container and remove the child margins and their :last-child resets. For a vertical flow of unrelated blocks, a flex column with gap or a single "stack" rule does the same.

Examples

/* bad */
.toolbar { display: flex; }
.toolbar > * { margin-right: 1rem; }
.toolbar > *:last-child { margin-right: 0; }
/* good */
.toolbar { display: flex; gap: 1rem; }

Sources

Facts

Id: css/gap-over-margins
Severity: minor
Check: manual a person reviews it; the report lists it as a checklist
Applies to: css scss less
Taught by the skill: fe-css-layout CSS layout
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

npx github:dawidolko/frontend-skills explain css/gap-over-margins