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.

Dlaczego

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.

Poprawka

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.

Przykłady

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

Źródła

Fakty

Identyfikator: css/gap-over-margins
Waga: drobna
Sprawdzanie: ręczne ocenia człowiek; raport podaje to jako listę kontrolną
Dotyczy plików: css scss less
Uczy jej skill: fe-css-layout CSS layout
Od wersji: 0.1.0

Plik reguły na GitHubie

Przeczytaj w terminalu

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