💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!
Cập nhật: 2025年3月1日
Khoảng cách gap
📌
Kết luận
Dùng gap để chỉ định khoảng cách giữa các phần tử con một cách nhanh chóng
📝 Mã thực tế tại đây
.container { display: flex; gap: 16px; }Lợi ích của gap
| Phương pháp | Ưu điểm | Nhược điểm |
|---|---|---|
gap | Đơn giản, không gây ra lề thừa | — |
margin | Điều khiển riêng biệt | Tạo ra lề thừa ở phần tử đầu/cuối |
gap là nó không tạo ra khoảng trống dư thừa ở phần tử đầu tiên và cuối cùng.
Tổng kết
-gap dùng được cho cả Flexbox và Grid
- Viết ngắn gọn và sạch sẽ hơn so với dùng margin
Hãy thử trong phần bài tập
Tạo khoảng cách 16px giữa các phần tử con trong Flexbox bằng gap nhé.🧪 Thử nghiệm tại đây
Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.
■ Bài tập thực hành
Tạo khoảng cách 16px giữa các phần tử con trong Flexbox.
Gợi ý khi gặp khó khăn
gap: 16px;