Spacing & Sizing: Quy chuẩn kích thước và khoảng cách

Sai lầm lớn nhất của Developer là sử dụng các con số ngẫu nhiên (padding: 13px, margin-top: 21px). Một UI chuyên nghiệp phải dựa trên một Hệ thống toán học chặt chẽ.

1. Hệ thống 8pt Grid (The Gold Standard)

Trong thiết kế UI hiện đại, hầu hết các hệ thống (Apple, Google, Tailwind) đều dựa trên bội số của 8.

Tại sao lại là 8?

• Tương thích màn hình: 8 là số chẵn, khi chia đôi (4), chia tư (2) vẫn là số nguyên, giúp tránh bị hiện tượng "pixel mờ" trên các màn hình có độ phân giải khác nhau.
• Tính nhất quán: Nó giới hạn lựa chọn của bạn. Thay vì phân vân giữa 10, 11, 12, 13px, bạn chỉ có 8 hoặc 16px.

2. Quy chuẩn Spacing cho Component phổ biến

Việc chọn đúng padding không chỉ giúp component đẹp mà còn giúp nó trông "cân đối" về mặt thị giác.

A. Nút bấm (Buttons)

Đừng bao giờ dùng padding đều 4 phía. Một nút bấm chuẩn luôn cần "độ thở" theo chiều ngang.

• Padding dọc (py): 8px - 10px (py-2 hoặc py-2.5).
• Padding ngang (px): 16px - 20px (px-4 hoặc px-5).
• Tỷ lệ vàng: px nên gấp 2 lần đến 2.5 lần py.
• Khoảng cách Icon: Nếu nút có icon và text, hãy dùng gap-2 (8px).

B. Ô nhập liệu (Inputs)

Input cần sự đồng bộ với Button để khi đặt cạnh nhau không bị lệch.

• Padding trái/phải: 12px - 16px (px-3 hoặc px-4).
• Padding trên/dưới: Tùy thuộc vào font-size để đạt được chiều cao mục tiêu (thường là 40px).
• Icon: Nếu có icon ở đầu, hãy dùng padding-left lớn hơn (vd: 40px - pl-10) để không đè lên icon.

C. Thẻ (Cards) - Quy tắc "Trong nhỏ, Ngoài lớn"

Card là nơi chứa nhiều thông tin, vì vậy spacing bên trong card phải cực kỳ khoa học.

• Container Padding: 16px (p-4) cho card nhỏ, 24px (p-6) cho card lớn.
• Header & Body Gap: Dùng gap-4 (16px) để tách biệt tiêu đề và nội dung.
• Quy tắc Đệm (Outer vs Inner): Padding của thẻ cha luôn phải lớn hơn khoảng cách giữa các phần tử con bên trong.

3. Khoảng cách giữa các Component (Margin / Gap)

Sử dụng khoảng cách để nhóm (Group) hoặc tách (Separate) thông tin.

8px (Small - gap-2)

Dùng cho các thành phần rất gần gũi:

• Giữa tiêu đề và mô tả ngắn ngay bên dưới.
• Giữa các tag (nhãn) trong cùng một nhóm.

16px (Medium - gap-4)

Dùng cho các thành phần cùng cấp:

• Khoảng cách giữa các Input trong một Form.
• Khoảng cách giữa các Card trong một hàng của thư viện.

32px - 48px (Large - gap-8 / gap-12)

Dùng để phân chia các Section khác nhau:

• Khoảng cách giữa Header và Content chính.
• Khoảng cách giữa các khối chức năng tách biệt trên một trang.

4. Quy chuẩn Border Radius (Bo góc)

Bo góc quyết định "cảm xúc" của website. Đừng bo mỗi chỗ một kiểu.

• 4px (rounded-sm): Cảm giác kỹ thuật, cứng cáp. Dùng cho checkbox, các icon nhỏ.
• 6px - 8px (rounded-md): Tiêu chuẩn cho SaaS. Dùng cho Button, Input, Card. Đây là tỷ lệ mang lại sự chuyên nghiệp nhất.
• 12px - 16px (rounded-xl): Thân thiện, hiện đại. Dùng cho các banner lớn, modal popup.
• 999px (rounded-full): Dùng cho nút tròn, tag (Badges) hoặc avatar.

5. Kích thước chiều cao chuẩn (Standard Heights)

Để các component (Button, Input, Select) đứng cạnh nhau nhìn đẹp, chúng phải có cùng chiều cao (Height).

6. Layout Max-width

Đừng để nội dung của bạn tràn ra hết màn hình 4K.

• Max-width cho Content: 600px - 800px (tối ưu cho việc đọc văn bản).
• Max-width cho Page: 1200px - 1440px (chuẩn cho màn hình Laptop/Desktop hiện nay).

// ✅ Cách bọc giao diện chuẩn
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  {children}
</div>

Kết luận

Hệ thống Spacing tốt giúp ứng dụng của bạn có "nhịp điệu" (Rhythm). Người dùng không cần hiểu toán học, nhưng họ sẽ cảm nhận được sự "vừa vặn" và "dễ chịu" khi mọi thứ đều tuân theo một quy luật thống nhất. Hãy nhớ: Khi phân vân, hãy dùng 16px (4).