In a flex container, what does the gap property give you that per-item margins do not, and how does gap change the space justify-content has to distribute?

## What gap is `gap` is the shorthand for `row-gap` and `column-gap`, set on the flex container. `gap: 16px` sets both; `gap: 8px 24px` sets `row-gap: 8px` and `column-gap: 24px`, in that order — rows first, matching the row/column order in the longhand names. In a flex container the column gap separates adjacent items along a row-direction main axis, and the row gap separates the flex lines from each other once wrapping produces more than one. `gap` in flexbox is universally supported in current browsers, but it arrived later than the rest of flexbox — Safari only shipped it in 14.1 (2021) — which is why older codebases are full of margin-based spacing. ## Difference one: only between, never outside The defining property is that `gap` applies **between** adjacent items and nowhere else. There is no leading gap before the first item and no trailing gap after the last one. The margin equivalent needs an exception rule to achieve the same thing: ```css /* margins: spacing plus a correction */ .row > * + * { margin-left: 16px; } /* gap: spacing, full stop */ .row { display: flex; gap: 16px; } ``` The `* + *` selector or a `:last-child { margin-right: 0 }` reset is the tell. Both work, but the margin version puts the spacing decision inside the children's own rules, so a component cannot be reused at a different density without overriding them. `gap` keeps the decision where it belongs — on the container that owns the arrangement. ## Difference two: reserved before free space This is the mechanical half of the answer. When the browser computes a flex line's free space it subtracts the items' outer main sizes **and every gap** from the line's main size. Whatever remains is what `justify-content` distributes. So the two features layer rather than fight. A container with three items, `gap: 16px` and `justify-content: space-between` reserves 32px for the two gaps, then hands each of those two gaps an equal share of whatever is left. `gap` is a floor on the separation; `justify-content` decides the rest. This makes `gap` the right partner for the distribution values, which on their own guarantee nothing: at the narrow end of a responsive range the free space goes to zero and `space-evenly` lets items touch. Adding a `gap` means the layout degrades to "minimum spacing" instead of "no spacing". ## Difference three: gaps are fixed Gaps do not flex. When there is not enough room, items shrink and the gaps keep their declared size — the separation is a constant of the layout, not something the algorithm is free to spend. Margins behave the same way, but people frequently expect gaps to compress under pressure, and they do not. ## Difference four: no collapsing to reason about Margins between flex items never collapse, so two facing 12px margins produce 24px of space, unlike the block layout most developers' intuition is built on. `gap` sidesteps that question entirely: one declaration, one value, one gap. ## When margins are still the right answer `gap` is uniform — every adjacent pair gets the same value. When you want spacing that is not uniform, margins are still the tool: a larger space before one particular item, or an `auto` margin to push one item away from the group. Those are per-item decisions, and the per-item property is the correct place for them. The healthy pattern is `gap` for the rhythm plus a targeted margin for the exception. ## Answering the question well A strong answer covers both halves. The ergonomic half — container-owned, no trailing-space correction, no collapsing rules — is what most candidates say. The mechanical half — gaps are subtracted before free space is computed, so `justify-content` distributes only the remainder and the two compose — is what shows you understand where `gap` sits in the layout algorithm rather than just preferring its syntax.