Vì sao nên dùng `gap` thay cho `margin-right` + `:last-child { margin-right: 0 }` khi tạo khoảng cách giữa các item?

gap khai báo khoảng cách giữa các item và chỉ áp dụng ở phần ở giữa — không sinh margin thừa ở hai đầu, nên không cần luật bù :last-child.

/* cách cũ: 2 luật, dễ sai khi item wrap xuống dòng */
.list > * { margin-right: 12px; }
.list > *:last-child { margin-right: 0; }

/* cách hiện tại */
.list { display: flex; flex-wrap: wrap; gap: 12px; }

Ưu điểm cụ thể:
- Wrap đúng: khi item xuống dòng, gap cũng tạo khoảng cách giữa các dòng (row-gap); margin-right thì không, phải thêm margin-bottom và lại thừa ở dòng cuối.
- Không cộng dồn / không collapse: gap không tham gia margin collapsing nên khoảng cách luôn đúng bằng giá trị khai báo.
- Không đụng tới con: khoảng cách do container quyết định, component con giữ được tính tái sử dụng (không tự mang margin theo).

Lưu ý: gap cần container là flex, grid hoặc multi-column. Với phần tử block thường vẫn phải dùng margin.