Khoảng cách
Stack
Stack là khoảng cách theo phương thẳng đứng, với margin được thêm vào phía dưới.
| Token | Value |
|---|---|
| space-stack-x | 1px |
| space-stack-2x | 2px |
| space-stack-4x | 4px |
| space-stack-6x | 6px |
| space-stack-8x | 8px |
| space-stack-10x | 10px |
| space-stack-12x | 12px |
| space-stack-16x | 16px |
| space-stack-20x | 20px |
| space-stack-24x | 24px |
| space-stack-32x | 32px |
| space-stack-48x | 48px |
| space-stack-64x | 64px |
Inline
Inline là khoảng cách theo phương ngang, với margin được thêm vào bên phải.
| Token | Value |
|---|---|
| space-inline-x | 1px |
| space-inline-2x | 2px |
| space-inline-4x | 4px |
| space-inline-6x | 6px |
| space-inline-8x | 8px |
| space-inline-10x | 10px |
| space-inline-12x | 12px |
| space-inline-16x | 16px |
| space-inline-20x | 20px |
| space-inline-24x | 24px |
| space-inline-32x | 32px |
| space-inline-48x | 48px |
| space-inline-64x | 64px |
Inset
Inset là khoảng cách được tạo ra bằng cách thêm padding đều nhau ở 4 phía của 1 thành phần
| Token | Value |
|---|---|
| space-inset-x | 1px |
| space-inset-2x | 2px |
| space-inset-4x | 4px |
| space-inset-6x | 6px |
| space-inset-8x | 8px |
| space-inset-10x | 10px |
| space-inset-12x | 12px |
| space-inset-16x | 16px |
| space-inset-20x | 20px |
| space-inset-24x | 24px |
| space-inset-32x | 32px |
| space-inset-48x | 48px |
| space-inset-64x | 64px |
Trường hợp đặc biệt
Khi một thiết kế canh giữa theo phương đứng hay phương ngang thì không phụ thuộc vào padding
