Teaching step

space-between vs space-around vs space-evenly

MediumDistributing spaceF16

A designer said the gaps looked wrong. They measured them. The space between the items was exactly twice the space at the ends, and the CSS said space-around.

Three 100px cards in a 700px row. Space them so that all four gaps are identical — before the first card, between the first and second, between the second and third, and after the last. 400px of free space, four gaps, 100px each. One of the three space-* values does this. Two of them do something that looks similar enough to ship.

Hint

Count the gaps, then count the cards. Does the value you picked divide the space per gap, or per card?

Live preview900×360

Your stylesheet

checked in a real browser, four ways

The fixture — markup and base stylesheet

You cannot change either of these. They are what your selectors have to reach, and they are the same ones the judge renders.

<div class="row"><div class="card k1"></div><div class="card k2"></div><div class="card k3"></div></div>

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; }
.row { width: 700px; height: 120px; background: #16161d; }
.card { width: 100px; height: 40px; background: #ffd166; }
.k2 { background: #7bdff2; }
.k3 { background: #b5e48c; }