Bài 17: Hệ thống spacing nâng cao trong Tailwind CSS

Đây là một trong những bài học quan trọng nhất để làm cho layout trông gọn gàng và dễ đọc: khoảng cách giữa các phần tử.

Bạn đã từng thấy một giao diện bị “nghẹt thở” vì các phần tử dính sát nhau chưa?

Hay một bố cục trông rối mắt chỉ vì thiếu khoảng trắng?

Khoảng cách (spacing) chính là yếu tố tinh tế giúp giao diện dễ đọc, dễ thở và trông chuyên nghiệp hơn.

Trong Tailwind CSS, khoảng cách được xử lý qua:

• margin (m-*)
• padding (p-*)
• gap-* trong Flex và Grid
• space-x-*, space-y-* để tự động tạo khoảng cách giữa các phần tử con

Hôm nay, bạn sẽ học cách dùng các công cụ này hiệu quả mà không cần viết một dòng CSS riêng.

---

Margin và padding cơ bản

Cú pháp:

• m-* = margin tất cả các phía
• mt-*, mb-*, ml-*, mr-* = margin riêng từng cạnh
• p-* = padding tất cả
• px-*, py-* = padding theo trục X/Y

Ví dụ:

📋 Copy<div class="m-4 p-6 bg-gray-100">
  Tôi có margin 1rem và padding 1.5rem
</div>

📋 Copy<div class="mt-2 ml-4 mb-6">
  Margin trên, trái, dưới
</div>

Class	Tác dụng (rem)
m-0	margin: 0
m-4	margin: 1rem
p-2	padding: 0.5rem
px-6	Padding trái-phải
py-3	Padding trên-dưới

Tailwind cung cấp nhiều mức spacing từ 0 đến 96 (24rem), hoặc px cho 1px.

---

Tạo khoảng cách giữa phần tử con – space-x-* và space-y-*

Khi bạn có nhiều phần tử con trong một khối, và muốn tạo khoảng cách đều giữa chúng mà không chỉnh từng cái, hãy dùng space-x-* (ngang) hoặc space-y-* (dọc).

📋 Copy<div class="flex space-x-4">
  <div class="bg-blue-200 p-4">A</div>
  <div class="bg-blue-400 p-4">B</div>
  <div class="bg-blue-600 p-4">C</div>
</div>

Kết quả: mỗi phần tử có khoảng cách 1rem với phần tử bên cạnh.

Tương tự với space-y-* nếu các phần tử xếp dọc:

📋 Copy<div class="flex flex-col space-y-3">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
</div>

Lưu ý: các class space-* chỉ hoạt động trên các phần tử con cùng cấp.

---

Dùng gap-* trong Grid hoặc Flex

Khi bạn dùng grid hoặc flex (kết hợp flex-wrap), bạn có thể dùng gap-* để tạo khoảng cách đồng đều giữa các item.

📋 Copy<div class="grid grid-cols-2 gap-6">
  <div class="bg-green-100 p-4">1</div>
  <div class="bg-green-300 p-4">2</div>
</div>

📋 Copy<div class="flex flex-wrap gap-4">
  <div class="bg-red-100 p-3">A</div>
  <div class="bg-red-200 p-3">B</div>
  <div class="bg-red-300 p-3">C</div>
</div>

---

So sánh các cách tạo khoảng cách

Cách dùng	Khi nào nên dùng
m-*, p-*	Dùng riêng cho từng phần tử
space-x-*	Tạo khoảng cách đều giữa con ngang
space-y-*	Tạo khoảng cách đều dọc
gap-*	Dùng khi dùng grid hoặc flex-wrap

---

Thực hành: Tạo danh sách nút có khoảng cách đều

📋 Copy<div class="flex space-x-4">
  <button class="px-4 py-2 bg-blue-500 text-white rounded">Xem thêm</button>
  <button class="px-4 py-2 bg-gray-300 rounded">Hủy</button>
</div>

---

Tổng kết kiến thức

Class	Tác dụng
m-*, p-*	Margin, padding từng phía
mt-*, ml-*, px-*, py-*	Margin/padding theo trục
space-x-*	Khoảng cách ngang giữa con
space-y-*	Khoảng cách dọc giữa con
gap-*	Khoảng cách trong Grid hoặc Flex

---

Tóm tắt bài học

• Spacing là yếu tố thiết kế quan trọng để giúp layout thoáng và dễ nhìn.
• Tailwind CSS cung cấp bộ class rất đầy đủ cho margin, padding, và spacing giữa các phần tử.
• Việc dùng đúng space-* và gap-* sẽ giúp bạn tiết kiệm thời gian chỉnh layout và giữ mã HTML ngắn gọn, sạch sẽ.

---

Bạn đã xử lý xong bố cục và khoảng cách. Tiếp theo, chúng ta sẽ học về vị trí phần tử — làm thế nào để một phần tử “dính cố định” lên đầu trang, hoặc “nằm chính xác một góc” của màn hình.

Trong bài 18, bạn sẽ học:

• Position: relative, absolute, fixed, sticky
• Cách dùng top, left, inset trong Tailwind
• Ứng dụng thực tế: tạo header cố định, popup nổi, badge góc phải…

---

Giao diện của bạn sắp trở nên thật sống động và linh hoạt.
Hẹn gặp bạn trong bài 18: Position (relative, absolute, fixed, sticky) trong Tailwind CSS!