间距计算器

如何使用

1. 输入基数（2 到 32 像素），它是整套刻度的最小档。
2. 选比例：从 1（线性）到 2。比例 1.5 表示每上一档增加一半。
3. 输入档数（4 到 10）。档位名为 3xs、2xs、xs、sm、md、lg、xl、2xl、3xl、4xl，从小到大。
4. 选输出单位：rem（除以 rem 基数，默认 16）或 px。
5. 看表格：每档显示 px 值、rem 值和一根表示相对大小的条。
6. 从输出卡片复制 :root 自定义属性。

常见用途

• 设计令牌文件：写组件前先生成 --space-* 变量。
• 内外边距梳理：把随手写的值换成一套短命名刻度。
• 响应式布局：档数少，根字号变大时依然好用。
• 字号与间距联动：间距与字号用同一个比例。
• 教模数刻度：直观展示一个比例如何生成整条梯子。

为何保证隐私

刻度只是本页面里的算术：一个基数、一个比例、一次除法。不上传任何数据，工具可离线使用。

常见问题

问：每一档怎么算的？ 答：第 n 档 = 基数 × 比例的 n 次方，最小档从 n = 0 开始。基数 4、比例 1.5 时前几档是 4、6、9、13.5、20.25 px，显示保留两位小数。

问：rem 换算怎么工作？ 答：每个 px 值除以 rem 基数（默认 16）。根字号不同就改 rem 基数字段，所有 rem 值随之更新。

问：为什么有些值带小数？ 答：比例会产生小数像素，间距令牌里很常见。px 保留两位小数、rem 保留三位。系统需要整像素时再手动取整。

问：CSS 注释和输出单位不一致？ 答：每个变量旁的注释始终是 px 值，输出单位选 rem 时也能直接读出真实大小。