.chips { display: flex; gap: 16px; }Every two neighbouring chips are separated evenly by 16px.
LESSON 55 OF 100
Add consistent space with gap
Separate flex items without individual margins.
STEP 1 · LEARN
How it works
gap sets the minimum space between neighbouring container items. The spacing belongs to the layout and adds no outer margins at the group edges.
.chips { display: flex; gap: 0; }A zero gap does not create the requested visual separation.
STEP 2 · APPLY
Your exercise
Enable Flexbox and set a 16px gap.
index.htmlCSS
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK
What needs to pass
0%not checked
- ○The group is a flex container.
- ○The space between items is 16px.
- ○The target element is present in the page.
Explain the solution logic
gap directly expresses the distance between items and leaves outer edges untouched.