Dưới đây là phần tiếp theo trong chuỗi hướng dẫn học Tailwind CSS cho lập trình viên Front-End, tập trung vào Margin, Padding, Width, Height – nhóm utility class quan trọng nhất khi xây dựng bố cục và khoảng cách trong giao diện.
✨ Giới thiệu
Việc điều chỉnh kích thước và khoảng cách là nền tảng của thiết kế giao diện. Trong Tailwind CSS, bạn không cần viết CSS thủ công để làm điều đó – chỉ cần sử dụng utility class tương ứng cho:
- Margin (
m): khoảng cách bên ngoài - Padding (
p): khoảng cách bên trong - Width (
w): chiều rộng - Height (
h): chiều cao
Tailwind quy ước rõ ràng và linh hoạt, giúp bạn thao tác nhanh, chính xác và dễ đọc hơn rất nhiều.
🔹 1. Margin – m, mt, mr, mb, ml, mx, my
| Class | Ý nghĩa |
|---|---|
m-4 | Margin tất cả các phía |
mt-6 | Margin-top |
mr-2 | Margin-right |
mb-8 | Margin-bottom |
ml-1 | Margin-left |
mx-3 | Margin trái – phải |
my-5 | Margin trên – dưới |
-mt-4 | Margin âm (âm 1rem) |
📐 Giá trị margin là theo thang spacing chuẩn của Tailwind (ví dụ 1 = 0.25rem, 4 = 1rem, 8 = 2rem,…).
🔧 Bạn có thể thêm giá trị riêng bằng cách mở rộng spacing trong tailwind.config.js.
🔹 2. Padding – p, pt, pr, pb, pl, px, py
Cách dùng tương tự như margin:
| Class | Ý nghĩa |
|---|---|
p-4 | Padding tất cả |
pt-2 | Padding-top |
px-6 | Padding trái – phải |
py-8 | Padding trên – dưới |
✅ Ví dụ thực tế:
<div class="bg-white p-6 rounded shadow">
<h2 class="text-xl font-bold mb-4">Bài viết nổi bật</h2>
<p class="text-gray-600">Đây là nội dung bên trong thẻ có padding.</p>
</div>
🔹 3. Width – w-*
Tailwind hỗ trợ nhiều đơn vị chiều rộng: đơn vị tuyệt đối, %, viewport, hoặc tỷ lệ phần tử cha.
| Class | Mô tả |
|---|---|
w-0 → w-96 | Chiều rộng tuyệt đối theo spacing |
w-full | 100% chiều rộng |
w-1/2, w-1/3, w-2/3 | Tỷ lệ phần tử cha |
w-screen | 100vw (chiều rộng toàn màn hình) |
w-auto | Chiều rộng theo nội dung |
max-w-sm, max-w-4xl | Giới hạn max-width |
📌 Ví dụ:
<div class="w-full max-w-md mx-auto">
<input type="text" class="w-full p-2 border rounded" placeholder="Nhập email">
</div>
🔹 4. Height – h-*
Tương tự w-*, bạn có thể đặt chiều cao bằng nhiều đơn vị khác nhau:
| Class | Mô tả |
|---|---|
h-0 → h-96 | Chiều cao theo spacing |
h-full | 100% chiều cao phần tử cha |
h-screen | 100vh (chiều cao toàn màn hình) |
min-h-screen | Chiều cao tối thiểu = chiều cao màn hình (thường dùng với layout) |
📌 Ví dụ:
<section class="h-screen bg-blue-100 flex items-center justify-center">
<h1 class="text-4xl font-bold">Toàn màn hình</h1>
</section>
📱 Responsive với kích thước & khoảng cách
Bạn có thể thêm prefix như sm:, md:, lg:, xl: để thay đổi theo kích thước màn hình:
<div class="w-full md:w-1/2 p-4 sm:p-8">
<!-- Box sẽ chiếm 100% chiều rộng ở màn nhỏ, 50% ở màn lớn -->
</div>
🧠 Kết luận
Việc làm chủ margin, padding, width, height là chìa khóa để:
- Tạo bố cục mượt mà, dễ đọc, dễ mở rộng
- Hạn chế lỗi “rối layout”, tràn nội dung
- Không cần viết CSS riêng cho spacing/kích thước nữa
Khi kết hợp linh hoạt các utility này với flex, grid, container, bạn có thể dựng layout hoàn chỉnh chỉ trong vài phút.
