标签 → 输入框 → 错误提示，各 8px
三个元素被读成同一组，错误提示紧贴输入框；区块之间再切 24px，层级一眼可辨。
修复一处打断阅读节奏的随机间距
标题与说明本应被读成同一组，现在却隔着随机 13px。展开标尺，选择 token 与关系：两段物件之间的量尺、实际空隙和「非档位」告警会一起改变；把它恢复到有限档位，再判断亲疏。
任务：申请页的标题和说明本该是一组，却被写成随机的 13px。选一个关系，让读者能一眼判断它们该靠近还是分开。
标题：开始申请
说明与下一步操作
选择间距档位与关系
非档位值 13px。 不在 4/8/16/24/32 标尺上，复用会产生偶然间距，亲疏关系读不出来。下一步：切回相关项或区块之间，让间距回到有限 token。
从刚才的演示能读出什么
演示里的标尺按钮、关系切换和告警徽章对应间距系统的四条核心。
- 档位有限可复用：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。两者之间的间距应取多少？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。