一套间距
页面上所有的间距只从一组固定数值里取。定好之后，间距就不再是每次要做的决定。
你会遇到的现象
- 页面说不上哪里不对，就是有点乱
- 两个模块的内边距差 2px，看着别扭但找不到原因
- 让 AI 改一处间距，它顺手把别处也改了，值还都不一样
随手定的间距会产生一堆相近但不相等的值：11、13、14、15。这些差别小到看不出是故意的，大到能被感觉到，结果就是「有点乱」但说不清哪里乱。
用固定的一组值之后，间距的差别变成了有意义的信号：8 表示紧密相关，24 表示这是两个不同的组。这就是亲密法则在数值上的落地。
怎么定这组数
| 值 | 用在哪 | 典型场景 |
|---|---|---|
| 4 | 元素内部 | 图标和它的文字之间、标签的内边距 |
| 8 | 紧密相关的两项 | 标题和它的正文、表单标签和输入框 |
| 16 | 同一组内的条目 | 列表项之间、卡片的内边距 |
| 24 | 组与组之间 | 两个区块之间、卡片之间 |
| 40 / 64 | 大区块和页面边距 | 页面顶部留白、章节之间 |
五到六个值就够用。多了等于没定，因为总能找到一个「差不多合适」的；少了会不够用，被迫破例。
怎么用
- 间距差要能表达关系。相邻两级之间至少差 1.5 倍，8 和 24 的差别一眼能看出来，8 和 12 就模糊了。
- 竖向间距比横向更重要。人是纵向扫页面的，纵向的节奏乱了最容易被感知。
- 写成变量，不要写死。定义成 CSS 变量或设计令牌，改一次全站生效。
- 破例要有理由。确实需要一个不在表里的值时，先想想是不是层级关系没理清。
给 AI 的话
CLAUDE.md · 间距规范
## 间距 全站间距只能取这组值，不允许出现其他数字： 4 / 8 / 16 / 24 / 40 / 64（单位 px） 用法： - 4 元素内部，比如图标和文字之间 - 8 紧密相关的两项，比如标题和它的正文 - 16 同组条目之间、卡片内边距 - 24 组与组之间、卡片之间 - 40 / 64 大区块之间、页面上下边距 要求： - 定义成 CSS 变量（--sp-1 到 --sp-6）， 组件里引用变量，不要写具体数值。 - 如果某处你认为需要表里没有的值，先告诉我原因， 不要自己取一个中间值。 - 已有代码里出现表外的间距值时，主动指出来。
最后一条挺有用。让 AI 顺手做体检，比你自己逐个查快得多。