Spacing 间距
间距是元素与元素之间的空间。在代码中通常使用 margin 和 padding 来控制。
在这里，我们设计了一组具有韵律的间距值，以使产品能保持一致的视觉体验。
间距比例
排版页面中元素、组件、容器时所使用的间距比例。
大多数场景下，使用 8px 的倍数的值作为排版的间距。在较小元素（例如图标）的排版时，可以使用 4px 的间距。
| Example | Reference | Rem | Size (px) | Multiple | Type | Density |
|---|---|---|---|---|---|---|
| spacing-1 | 0.25 | 4 | 1x | *4 | 密 | |
| spacing-2 | 0.5 | 8 | 2x | *8 | 密 | |
| spacing-3 | 0.75 | 12 | 3x | *4 | 密 | |
| spacing-4 | 1 | 16 | 4x | *8 | 密 | |
| spacing-5 | 1.25 | 20 | 5x | *4 | 密 | |
| spacing-6 | 1.5 | 24 | 6x | *8 | 中 | |
| spacing-7 | 2 | 32 | 8x | *8 | 中 | |
| spacing-8 | 2.5 | 40 | 10x | *8 | 中 | |
| spacing-9 | 3 | 48 | 12x | *8 | 中 | |
| spacing-10 | 4 | 64 | 16x | *8 | 疏 | |
| spacing-11 | 5 | 80 | 20x | *8 | 疏 | |
| spacing-12 | 6 | 96 | 24x | *8 | 疏 | |
| spacing-13 | 8 | 128 | 32x | *8 | 疏 |
常用间距尺寸
内边距 Padding
| Example | Token | Value | Usage |
|---|---|---|---|
--padding-xss | 4px | 组件内小元素之间的间距 | |
--padding-xs | 8px | 组件内元素之间的间距 | |
--padding-sm | 12px | 组件内元素之间的间距 | |
--padding-md | 16px | 组件之间的间距 | |
--padding-lg | 24px | 区块之间的间距 |
外边距 Margin
| Example | Token | Value | Usage |
|---|---|---|---|
--margin-xss | 4px | 组件内小元素之间的间距 | |
--margin-xs | 8px | 组件内元素之间的间距 | |
--margin-xm | 12px | 组件内元素之间的间距 | |
--margin-md | 16px | 组件之间的间距 | |
--margin-lg | 24px | 区块之间的间距 |
何时使用
- 在设置组件间距和布局时，创造和谐的空间关系。