Nền tảng
Khoảng cách
Đã đặc tảMười ba bậc. Tên bậc là số nhân của 0.25rem, nên space-4 là bốn lần 0.25rem và bằng 1rem. Thang dày ở dưới và thưa ở trên. Khoảng cách trong control không đọc thang này mà đọc alias component.
Token
Thước mười ba bậc
Mỗi thanh đo rộng thật bằng var(token) — không phải một con số chép ra: nếu token đổi, thanh đổi theo ngay lần vẽ tiếp.
space-0Unknownspace-1Unknownspace-2Unknownspace-3Unknownspace-4Unknownspace-5Unknownspace-6Unknownspace-8Unknownspace-10Unknownspace-12Unknownspace-16Unknownspace-20Unknownspace-24UnknownVì sao
Vì sao thang có hình dạng này
Tên là số nhân, không phải thứ tự: space-10 là 2.5rem, không phải "bậc thứ mười". Thang dày ở dưới và thưa ở trên vì độ phân giải mắt: chênh 4px giữa 8 và 12 thì thấy rõ và có nghĩa; chênh 4px giữa 80 và 84 thì không ai thấy. Bậc bị thiếu — space-7, -9, -11, -14 — là cố ý: nếu một layout cần đúng 28px, câu hỏi không phải "thêm space-7" mà là vì sao 24 hoặc 32 không đúng.
Ranh giới
Space so với alias component
Đệm và khe bên trong một control đọc alias component, không đọc thang này: --nf-component-button-padding-*, --nf-component-button-gap, --nf-component-field-padding-*. Lý do là density: nếu một caller đặt p-[var(--nf-foundation-space-3)] lên một nút, nút đó sẽ không co theo density. Thang space là cho khoảng giữa các thứ; alias component là cho khoảng trongmột thứ.
Quy tắc
Do / Don't
| Do | Don't | Vì sao |
|---|---|---|
| Dùng space-* cho gap, margin, padding của layout | Dùng space-* cho đệm trong một control | Control phải co theo density; layout thì không |
| Dùng space-0 để xoá khoảng | Gõ 0 | Một 0 trần không nói nó là cố ý hay là bỏ sót |
| Chọn bậc gần nhất và sửa layout nếu nó sai | Thêm một bậc mới | Bậc thiếu là cố ý |
| Diễn đạt khoảng bằng gap trên container | Đặt margin-bottom lên từng con | gap không để lại khoảng mồ côi ở phần tử cuối |
| Giữ khoảng dọc giữa hai section là một bậc lớn | Trộn nhiều bậc gần nhau trong một trang | Ba bậc kề nhau trên một trang đọc như lỗi, không như nhịp |
Chưa quyết
Open questions
| Question | Owner | Resolves when |
|---|---|---|
| Thang space có nên co theo density như control không? | nexoboxvn@gmail.com | Một layout dày đặc thật cho thấy khoảng giữa các thứ cũng phải co |
| Có cần bậc âm cho chồng lấn có chủ ý không? | nexoboxvn@gmail.com | Một pattern cần chồng lấn. Không mở vì đối xứng |