间距系统
Spacing Scale
别名:间距系统间距阶梯间距规范为什么留白忽大忽小间距尺寸spacing scalespacing tokens4pt grid
这是什么
用一组固定的间距档位（如 4、8、12、16、24、32、48px，通常按 4 或 8 的倍数生长）统一控制 padding、margin 与 gap。所有留白都从同一把尺子里取，而不是随手写数值，疏密节奏才稳定；间距同时承担分组，间距越大，元素之间的关系越疏远。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 多组件、多页面需要统一的疏密节奏，避免每处随手写数
- 设计系统要交付 padding / margin / gap 的间距令牌
- 想用间距表达分组与层级，而不是到处加分割线
✕ 不适用场景
- 一次性插画或版式实验，间距本就该自由
- 需要光学对齐时，仍要靠目测微调而非死守档位
- 档位过密（每 2px 一档），选型反而变慢
常见形式
4px 线性
Linear 4px
4 的倍数逐档递增，最通用也最密
8px 基准
8px base
以 8 为基准、必要时补 4 与 12，节奏更疏
语义间距
Semantic spacing
inline / stack / section 按关系命名，跨组件稳定
实现要点
--space-1: 0.25remgap: var(--space-4)padding: var(--space-3) var(--space-4)margin-block: var(--space-6)gap: calc(var(--space-4) * var(--density, 1))用 rem 定义 6～8 档：--space-1 到 --space-8（4/8/12/16/24/32/48/64px）。组件只引用令牌，不写裸数值；同组元素用同一档，分组越大用越大的档。全局密度用一个乘数（--density）整体缩放，暗色或移动端可单独收紧。相邻档差距过小就合并，档位控制在 8 个以内。
平台 API
gappaddingmargincalc()--space-4代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| CSS | gap / padding / margin 间距落地的三个属性 |
| Tailwind CSS | p-4 / gap-4 (spacing scale) 4px 基准的成倍工具类 |
| Design tokens | --space-1 … --space-8 |
相关概念
长度可以写死成 px，也可以相对别的量：rem 相对根元素字号，em 相对元素自身或父级的字号，% 相对容器，vw/vh 相对视口。用户把浏览器默认字号调大时，用 px 排的版面纹丝不动，用 rem 的会整体放大。字号、间距、圆角尽量用 rem，只有边框与发丝线才写死 px。
基础相似概念把盒子四角做成圆弧，半径越大越柔和、越像卡片与气泡。圆角要和组件尺寸成套：按钮小、卡片中、大容器大，才像同一个家族；相邻圆角盒之间会留下难看的凹口，需要用同心圆角（外半径 = 内半径 + 间距）修正，或让它们干脆对齐。
基础相似概念用一组按比例递增的字号定义标题与正文层级，让排版有稳定节奏。以正文基准字号乘以固定比例（如 1.25 大三度、1.333 纯四度）逐级放大，标题之间形成可预期的视觉落差，不必逐档拍脑袋定 px；也可用 sm/md/lg 尺码或 clamp() 流式档位落地。
基础搭配使用用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件搭配使用