间距与边距 Spacing and Margins
间距阶梯共 17 档(space-0 → space-1000),包含 4–40px 每 4px 一档,并保留 0px、2px、6px 与大尺寸刻度。gap、padding、margin 共用同一套 space Token;标尺按真实像素渲染。
间距阶梯 space · 17
| Token 名称 | 间距 | 示例 |
|---|---|---|
| space-0 | 0px | |
| space-025 | 2px | |
| space-050 | 4px | |
| space-075 | 6px | |
| space-100 | 8px | |
| space-150 | 12px | |
| space-200 | 16px | |
| space-250 | 20px | |
| space-300 | 24px | |
| space-350 | 28px | |
| space-400 | 32px | |
| space-450 | 36px | |
| space-500 | 40px | |
| space-550 | 44px | |
| space-600 | 48px | |
| space-800 | 64px | |
| space-1000 | 80px |
使用场景 usage · 3
组件内间距 Component spacing
控件内部元素之间用 space-050 / space-075 / space-100:图标与文字 4px、行内元素 6–8px;进入更紧的复合控件(输入框内部)才用 space-025。
页面留白 Page spacing
区块与卡片之间用 space-200 / space-300;页面级大分区(表单分组、章节)用 space-400 / space-500,与悬浮层内边距同源。
外边距 Margin
margin 只用于同级元素之间的推挤;组件内部的贴边用容器的 padding。gap、padding、margin 统一引用 space Token,避免子元素各自带 margin 造成叠加漂移。