📐
间距比例生成器
按基准值与倍率生成 8pt/4pt 间距刻度，输出 CSS 变量，统一设计系统留白。
本地处理 · 不上传
加载工具中…
相关：间距 · spacing · 8pt · 刻度 · 设计系统 · css
间距比例生成器按基准值与比例系数生成一套成体系的间距变量，输出 CSS 自定义属性。统一的间距阶梯是设计系统的地基。
使用步骤
- 设置基准值与比例类型
- 查看生成的间距阶梯
- 调整层级数量
- 复制为 CSS 变量
使用场景
- 为设计系统建立间距规范
- 统一项目中杂乱的边距数值
- 生成 Tailwind 风格的间距配置
- 让设计与开发对齐间距语言
小贴士
- 间距成体系的关键是限制可选项。有 8 个层级可选比有无数个随意数值好得多，前者天然协调，后者永远在微调。
- 4 或 8 像素作为基准最常见，因为多数屏幕与图标尺寸都是它们的倍数，能保证像素对齐。
- 线性阶梯（4、8、12、16）适合小间距，大间距用倍数增长（32、48、64）更合理，两段混合的阶梯最实用。
常见问题
为什么要用 8 的倍数？
主流设备的像素密度多为 2 倍或 3 倍，8 的倍数在各种缩放下都能落在整数物理像素上，避免半像素带来的模糊边缘。图标与组件尺寸也普遍按此设计。
层级要多少个？
六到八个通常够用。层级太少不够表达疏密关系，太多则失去约束意义——设计者又会陷入「用 20 还是 24」的纠结。
间距用 rem 还是 px？
字体相关的间距用 rem，能随用户的字号设置缩放；结构性的固定间距用 px 更可控。多数设计系统选择统一用 rem。
间距比例生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用间距比例生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。