Bài 5: Cách viết layout với các lớp margin, padding

Khi xây dựng bất kỳ giao diện web nào, việc sắp xếp bố cục, căn lề, và tạo khoảng trống giữa các thành phần là điều không thể thiếu. Trong CSS truyền thống, chúng ta thường dùng margin và padding bằng cách viết từng dòng CSS cho từng phần tử.

Trong Tailwind CSS, việc xử lý layout này được đơn giản hóa bằng các class tiện ích (utility class) như m-4, p-2, mt-6, pl-3…
Trong bài học này, bạn sẽ được hướng dẫn chi tiết cách dùng các lớp này để bố trí khoảng cách bên trong (padding) và bên ngoài (margin), cũng như các biến thể như mx-auto, space-x-*, space-y-*.

---

Margin và Padding là gì?

Margin là khoảng cách bên ngoài phần tử (ra ngoài so với phần tử khác).

Padding là khoảng cách bên trong phần tử (tạo khoảng cách giữa nội dung và viền của chính nó).

Xem thêm về margin và padding trong bài học dưới đây:

Bài 6: Box Model – nền tảng quan trọng để căn chỉnh bố cục web

Nếu bạn quên khái niệm này, hãy tưởng tượng một hộp quà:

• Lớp giấy lót bên trong chính là padding
• Khoảng trống giữa hộp và các hộp khác là margin

---

Cú pháp margin và padding trong Tailwind

Tailwind dùng cú pháp thống nhất:

📋 Copy[loại]-[kích-thước]

Loại (prefix):

Ký hiệu	Ý nghĩa
m	margin toàn bộ
mt	margin-top
mb	margin-bottom
ml	margin-left
mr	margin-right
mx	margin trái + phải
my	margin trên + dưới
p	padding toàn bộ
pt	padding-top
pb	padding-bottom
pl	padding-left
pr	padding-right
px	padding trái + phải
py	padding trên + dưới

Kích thước:

Tailwind cung cấp hệ thống giá trị chuẩn:

Số	Tương đương (rem)	Pixel gần đúng
0	0rem	0px
1	0.25rem	4px
2	0.5rem	8px
3	0.75rem	12px
4	1rem	16px
5	1.25rem	20px
6	1.5rem	24px
8	2rem	32px
10	2.5rem	40px

---

Ví dụ: Tạo khoảng cách giữa các phần tử

Padding toàn bộ

📋 Copy<div class="p-4 bg-gray-100">
  Nội dung có padding đều 1rem (16px)
</div>

Padding riêng chiều ngang

📋 Copy<div class="px-6 py-2 bg-blue-100">
  Padding trái – phải là 24px, trên – dưới là 8px
</div>

Margin giữa các hộp

📋 Copy<div class="m-4 bg-green-100">Hộp 1</div>
<div class="m-4 bg-green-200">Hộp 2</div>

---

Căn giữa với mx-auto

Một class rất phổ biến để căn giữa phần tử theo chiều ngang là:

📋 Copy<div class="mx-auto w-64 bg-yellow-100">
  Tôi được căn giữa
</div>

Điều kiện: phần tử phải có width cụ thể (ví dụ: w-64 tương đương 16rem)

---

Khoảng cách tự động giữa các phần tử: space-x-*, space-y-*

Tailwind có tính năng rất hay để tự tạo khoảng cách giữa các phần tử con, thay vì thêm mr- hoặc mb- cho từng cái.

Ví dụ: space-x-4

📋 Copy<div class="flex space-x-4">
  <div class="bg-red-300 p-2">A</div>
  <div class="bg-red-400 p-2">B</div>
  <div class="bg-red-500 p-2">C</div>
</div>

Khoảng cách ngang giữa các phần tử con là 1rem (16px), không ảnh hưởng tới phần tử đầu và cuối.

Ví dụ: space-y-2

📋 Copy<div class="space-y-2">
  <p>Hàng 1</p>
  <p>Hàng 2</p>
  <p>Hàng 3</p>
</div>

Khoảng cách dọc giữa các dòng là 0.5rem (8px)

---

Tương tác nhỏ

Bạn hãy thử viết đoạn code sau, chạy trong trình duyệt và quan sát:

📋 Copy<div class="w-64 mx-auto p-6 bg-white rounded shadow space-y-4">
  <h2 class="text-lg font-bold">Thông báo</h2>
  <p class="text-gray-700">Đây là ví dụ sử dụng padding và spacing.</p>
  <button class="bg-blue-500 text-white px-4 py-2 rounded">OK</button>
</div>

Hãy thử thay đổi giá trị p-6 thành p-2 hoặc p-10 và xem kết quả khác biệt ra sao. Bạn sẽ thấy Tailwind rất linh hoạt để tinh chỉnh giao diện từng chút một.

---

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

Class	Tác dụng
p-4	Padding toàn phần 1rem
mx-2	Margin trái – phải 0.5rem
pt-6	Padding-top 1.5rem
space-x-4	Tạo khoảng cách ngang giữa các con
mx-auto	Căn giữa phần tử theo chiều ngang

---

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

• Margin (m-*) và Padding (p-*) là các class cơ bản để tạo bố cục.
• Tailwind cho phép căn chỉnh từng hướng (mt-, py-, ml-…) rất linh hoạt.
• mx-auto giúp căn giữa phần tử có chiều rộng xác định.
• space-x-* và space-y-* giúp bạn tạo khoảng cách đều giữa các phần tử con mà không cần viết class riêng từng cái.