Tạo Thang Khoảng Cách — Khoảng Trắng Nhất Quán Trong Thiết Kế

Các giá trị margin và padding tùy tiện dẫn đến giao diện không nhất quán. Thang khoảng cách định nghĩa tập hợp giá trị hạn chế dựa trên tỷ lệ toán học — giống như thang chữ.

Cách Tiếp Cận T-shirt Sizing

Tailwind CSS dùng thang 4px cơ bản: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64px (hoặc 1, 2, 3, 4, 5, 6, 8, 10, 12, 16 theo đơn vị rem). Thang tuyến tính đơn giản này hoạt động xuất sắc cho hầu hết giao diện. Sự nhất quán có giá trị hơn tiến triển toán học hoàn hảo.

Thang Lũy Thừa

4, 8, 16, 32, 64px (nhân đôi) tạo ra sự khác biệt khoảng trắng kịch tính hơn. Material Design dùng 8px làm đơn vị cơ bản. Hướng dẫn Giao diện Người dùng của Apple dùng bội số 4px. Chọn một đơn vị cơ bản và tuân thủ nó.

Triển Khai Với CSS Variables

--spacing-1: 4px; --spacing-2: 8px; --spacing-4: 16px; --spacing-8: 32px. Design token kết nối biến khoảng cách với tên ngữ nghĩa. Từ đó bạn có thể thay đổi tỷ lệ toàn bộ giao diện bằng cách thay đổi cơ bản.