One Spacing Scale
Every spacing value on the page comes from a single fixed set. Once it's set, spacing is no longer a decision you make each time.
- 页面说不上哪里不对，就是有点乱
- 两个模块的内边距差 2px，看着别扭但找不到原因
- 让 AI 改一处间距，它顺手把别处也改了，值还都不一样
Eyeballed spacing produces a pile of near-but-not-equal values: 11, 13, 14, 15. The differences are too small to look deliberate, but large enough to be felt. The result is a vague sense of "a bit messy" that no one can pin down.
With a fixed set of values, spacing differences become meaningful signals: 8 means tightly related, 24 means these are two different groups. This is the law of proximity landed in numbers.
How to pick the set
| 值 | 用在哪 | 典型场景 |
|---|---|---|
| 4 | 元素内部 | 图标和它的文字之间、标签的内边距 |
| 8 | 紧密相关的两项 | 标题和它的正文、表单标签和输入框 |
| 16 | 同一组内的条目 | 列表项之间、卡片的内边距 |
| 24 | 组与组之间 | 两个区块之间、卡片之间 |
| 40 / 64 | 大区块和页面边距 | 页面顶部留白、章节之间 |
Five to six values is enough. More is the same as none, because you can always find a "roughly right" one; fewer and you'll run short and be forced to break the rule.
How to use it
- Spacing differences should signal relationships. Adjacent levels should differ by at least 1.5x. The gap between 8 and 24 is visible at a glance; 8 and 12 is ambiguous.
- Vertical spacing matters more than horizontal. People scan pages vertically, so a broken vertical rhythm is what gets noticed first.
- Use variables, don't hardcode. Define them as CSS variables or design tokens — change once, applies everywhere.
- Have a reason for breaking the rule. When you genuinely need a value not in the scale, first ask whether the hierarchy is actually unclear.
Note for the AI
## 间距 全站间距只能取这组值，不允许出现其他数字： 4 / 8 / 16 / 24 / 40 / 64（单位 px） 用法： - 4 元素内部，比如图标和文字之间 - 8 紧密相关的两项，比如标题和它的正文 - 16 同组条目之间、卡片内边距 - 24 组与组之间、卡片之间 - 40 / 64 大区块之间、页面上下边距 要求： - 定义成 CSS 变量（--sp-1 到 --sp-6）， 组件里引用变量，不要写具体数值。 - 如果某处你认为需要表里没有的值，先告诉我原因， 不要自己取一个中间值。 - 已有代码里出现表外的间距值时，主动指出来。
The last line is genuinely useful. Having the AI run a quick health check is much faster than inspecting each value yourself.