间距比例尺 使用指南

<p><strong>输入：</strong>基 4、档 8。</p><p><strong>处理：</strong>生成比例。</p><p><strong>输出：</strong>--space-1…8 变量。</p>

核心功能

• 按基数与比例生成等比间距阶梯（如 4、5、6.3、7.8…px）
• 层级数可调（5–15 级），同步输出 CSS 变量
• 以条形长度直观对比各档间距的相对大小
• 纯本地计算，不上传任何输入

适用场景

• 统一组件间距。
• 设计系统 token。
• 栅格留白。

使用步骤

1. 填写基础间距（常用 4 或 8）
2. 设定比例（如 1.25）
3. 调整层级数确定阶梯长度
4. 查看各档数值与条状对比
5. 复制生成的 CSS 变量粘到项目 :root

实用技巧

• 间距 token 建议只取整数或 0.5 的倍数，否则写进 CSS 后难以对齐像素
• 基数与控制组件高度对齐（如按钮 40px 用 8 的倍数）整体更协调
• 需要重叠或负外边距时直接写负值，不要借间距 token 表达负号
• 阶梯比例不宜过大，超过 1.5 时相邻档位跨度会明显失衡

常见问题

基值怎么选？

4/8 常见；与组件高度对齐更协调，按体系定。

负间距怎么处理？

间距用正 token；需要重叠时用 margin 负值，不要借间距 token 表达。

会保存或上传我的内容吗？

结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。