标签 → 输入框 → 错误提示，各 8px
三个元素被读成同一组，错误提示紧贴输入框；区块之间再切 24px，层级一眼可辨。
调标尺、切关系，看物件之间的空隙
一条间距标尺，5 个 token。选档位、切关系（相关项 / 区块之间 / 随机非档位），标题和说明之间的空隙会跟着变高、变矮或亮起告警——间距长在物件上，不只是页脚换一句解释。
标题：开始申请
说明与下一步操作
相关项用 8px。 当前 token 8px：同组相关项保持紧凑，眼睛能读成一组。对照——同一标尺下两种关系读取不同档位，间距长在物件上。
从刚才的演示能读出什么
演示里的标尺按钮、关系切换和告警徽章对应间距系统的四条核心。
- 档位有限可复用：4/8/16/24/32px 五个 token，就是标尺上能选的那几个值；全站复用同一套，不再各自调间距。
- 关系决定档位：相关项读 token 本档，区块之间读两倍节奏——同一个 token 在两种关系下输出不同间距。
- 间距长在物件上：标题和说明之间的空隙随 token 和关系变化，还带丈量标签；改一处，物件之间的距离立刻看得见。
- 非档位值破坏节奏：随机值（9/13/21/29/37…）不在标尺上，演示里会亮起「非档位」告警；多人协作时会再叠出 11、12、14。
什么时候用哪种关系
按「这两段内容该被读成一组还是两块」来选，不靠手感。
- 相关项用小档位：表单标签与输入框、列表项内部、按钮与其说明——希望被读成同一组，取 4/8/16。
- 区块之间用大档位：功能区间、卡片之间、章节之间——希望被读成独立两块，取 24/32 或两倍节奏。
- 不要用 padding 当布局间距：组件内部留白用 padding，页面与区块之间的距离用 space，两者别混。
- 不适合单独使用：对齐、层级、亲密性要和间距一起看；只调间距救不了缺对齐或撞色的页面。
怎么用：从随机值到有限标尺
四步把一个页面的间距收口到有限 token，不靠「看起来差不多」。
- 列出页面所有间距关系：相关项、区块之间、页面外缘各是哪些。
- 为每种关系指定一个 token，保证相关项 < 区块之间。
- 把随机 margin 替换成对应 token，删掉多层嵌套叠出的偶然间距。
- 小屏缩小外侧空白但不让文字贴边，触控目标仍可点；间距改变后焦点和主操作不跳动。
正反例：同一个表单组的间距
只改一处：相关项间距是否落在有限 token 上。
标签 → 输入框 13px、输入框 → 错误提示 11px
随机值让同组关系松散，错误提示像飘在别处；协作时还会再叠出 12、14、15。
快速自测
定价页有「套餐卡」和「FAQ」两个区块，要让用户一眼读成独立的两块。相关项 token 是 8px、区块 token 是 24px。两者之间的间距应取多少？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。