Trình tạo Thang Khoảng cách
Công cụ tạo thang khoảng cách này xây dựng hệ thống khoảng cách từ đơn vị gốc 4, 5, 6 hoặc 8 px với 12, 16 hoặc 20 bước và xuất ra dưới dạng CSS custom properties theo px hoặc rem.
Về công cụ này
Công cụ tạo thang khoảng cách này xây dựng hệ thống khoảng cách từ đơn vị gốc 4, 5, 6 hoặc 8 px với 12, 16 hoặc 20 bước và xuất ra dưới dạng CSS custom properties theo px hoặc rem.
Cách sử dụng
- Chọn đơn vị gốc, chẳng hạn 4 px hoặc 8 px.
- Chọn đầu ra px hoặc rem.
- Chọn số bước bạn cần.
- Nhấn Copy CSS Variables để thêm thang vào stylesheet của bạn.
Điều nên biết
- Khoảng cách trong Tailwind CSS dựa trên đơn vị 4 px (0.25 rem).
- Material Design dùng lưới 8 dp, với 4 dp cho các điều chỉnh nhỏ.
- Các bội số như 0.5, 1, 1.5, 2, 3, 4, 6 và 8 đáp ứng hầu hết nhu cầu về khoảng cách.
- Giá trị rem ở đây giả định cỡ chữ gốc là 16 px.
- Một thang cố định thay thế các giá trị pixel tùy ý và giữ bố cục nhất quán về mặt thị giác.
Chạy hoàn toàn trong trình duyệt của bạn — không có dữ liệu nào bạn nhập được tải lên hay lưu lại.
Câu hỏi thường gặp
Nên dùng hệ khoảng cách 4px hay 8px?
8 px là mặc định phổ biến cho bố cục; 4 px cho phép kiểm soát chi tiết hơn với giao diện dày đặc và thành phần nhỏ. Nhiều nhóm dùng bước 4 px trong nhịp 8 px.
Thang khoảng cách trong design system là gì?
Là một tập giá trị khoảng cách định sẵn dùng cho margin, padding và gap, để mọi màn hình đều dùng cùng các mức tăng.
Làm sao dùng thang trong CSS?
Sao chép các biến và dùng chúng như padding: var(--space-4); để khoảng cách nhất quán giữa các thành phần.
Thang này có giống khoảng cách của Tailwind không?
Với đơn vị gốc 4 px và đầu ra rem, các giá trị tuân theo cùng bội số như thang khoảng cách mặc định của Tailwind.