间距系统
用基准单位与步进规则（线性 / 倍数 / Fibonacci / 4px 网格）生成间距阶梯，输出 --space-* 变量与 px / rem 对照表，另附常用用法示例。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
间距设置
第 n 档的间距由步进规则决定：线性 base × n、倍数 base × 2^(n-1)、Fibonacci base × fib(n)、网格把 base × n 吸附到网格单位上。0 档固定是 0。
实时预览
预览按当前间距渲染，方块之间的间隔就是对应变量的值。
步进公式：space(n) = 4px × n
结果
| 档位 | 变量 | px | rem |
|---|---|---|---|
| 0 | --space-0 | 0 | 0 |
| 1 | --space-1 | 4 | 0.25 |
| 2 | --space-2 | 8 | 0.5 |
| 3 | --space-3 | 12 | 0.75 |
| 4 | --space-4 | 16 | 1 |
| 5 | --space-5 | 20 | 1.25 |
| 6 | --space-6 | 24 | 1.5 |
| 7 | --space-7 | 28 | 1.75 |
| 8 | --space-8 | 32 | 2 |
:root {
--space-0: 0; /* 0rem */
--space-1: 4px; /* 0.25rem */
--space-2: 8px; /* 0.5rem */
--space-3: 12px; /* 0.75rem */
--space-4: 16px; /* 1rem */
--space-5: 20px; /* 1.25rem */
--space-6: 24px; /* 1.5rem */
--space-7: 28px; /* 1.75rem */
--space-8: 32px; /* 2rem */
}
/* usage */
.stack {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.section {
padding-block: var(--space-8);
padding-inline: var(--space-2);
}:root {
--space-0: 0; /* 0rem */
--space-1: 4px; /* 0.25rem */
--space-2: 8px; /* 0.5rem */
--space-3: 12px; /* 0.75rem */
--space-4: 16px; /* 1rem */
--space-5: 20px; /* 1.25rem */
--space-6: 24px; /* 1.5rem */
--space-7: 28px; /* 1.75rem */
--space-8: 32px; /* 2rem */
}/* usage */
.stack {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.section {
padding-block: var(--space-8);
padding-inline: var(--space-2);
}这个工具能做什么
- 给设计系统定间距阶梯：基准 4px 配线性规则适合紧凑的界面，基准 8px 配 Fibonacci 适合需要明显层次的大页面。
- 把散落在样式表里的 3px、7px、13px 收敛到一套 --space-* 变量上，改版时只调基准单位，全站间距一起变。
- 做 4px / 8px 网格对齐：用网格吸附规则把任意基准单位吸附到网格倍数，避免出现半像素或非网格值。
- 给组件库写文档时直接贴出 px / rem 对照表，让设计和开发对同一个 token 的理解保持一致。
示例
输入
基准单位 4px、线性规则、8 档、根字号 16px、包含 0 档
输出
公式 space(n) = 4px × n；变量 --space-0: 0（0rem）、--space-1: 4px（0.25rem）、--space-2: 8px（0.5rem）、--space-3: 12px（0.75rem）、--space-4: 16px（1rem）… 直到 --space-8: 32px（2rem）
用法示例里 .stack 用 gap: var(--space-2)、.section 用 padding-block: var(--space-8)。
常见问题
线性、倍数、Fibonacci 该选哪个？
线性适合档位多但跨度小的界面（4px 或 8px 步进），值可预测、好记。倍数规则每档翻倍，档位要少，否则第 8 档就是基准的 128 倍。Fibonacci 介于两者之间：前几档增长慢、后面逐渐拉开，适合既要有小间距又要大区块留白的页面。
4px 网格吸附是什么意思？
把 base × n 的结果四舍五入到网格单位的整数倍。例如基准 3px、网格 4px 时，第 1 档 3px 会吸附成 4px，第 3 档 9px 吸附成 8px。这样即使基准单位不是网格倍数，产出的间距仍然全部落在 4px 网格上。
0 档为什么单独列出来？
--space-0: 0 用来显式清零间距（例如 reset 或响应式里把间距收回 0），比直接写 0 更能表达「这里刻意不留间距」。不需要可以取消勾选，档位就从 --space-1 开始。
间距用 rem 还是 px？
对照表同时给出两种单位。rem 会跟随用户设置的根字号缩放，可访问性更好，适合排版相关的间距；固定尺寸的控件（例如按钮高度）用 px 更可控。变量值默认输出 px，rem 放在注释里方便换算。
档数有上限吗？
最多 20 档。倍数和 Fibonacci 规则下档数增长很快，实际项目里 8–12 档已经足够覆盖从 4px 到 96px 的范围，再多反而不好选。
关键词：spacing scalespacing systemdesign tokens4px gridfibonaccicss variables间距系统间距阶梯基准单位8px 网格设计令牌CSS 变量