← ToolBox / 间距比例尺

📏 Spacing Scale Generator

📐 工作原理与说明

间距 s(n) = base × rⁿ（等比）或 base × n（线性，如 4/8/12/16）

基于模数化间距体系：以一个基数按固定比例或倍数派生整组间距，保证页面留白节奏一致；输出为 CSS 变量，用于设计规范与组件间距。

Generate a consistent spacing ladder from a base unit such as 4/8/16 multiples and copy it as CSS variables for design systems.

基础间距 (px)

比例

层级数

预览

📚 深度解析：间距比例尺

生成 4 倍数列

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

基值怎么选？: 4/8 常见；与组件高度对齐更协调，按体系定。
负间距怎么处理？: 间距用正 token；需要重叠时用 margin 负值，不要借间距 token 表达。
会保存或上传我的内容吗？: 结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。

⚠️ 使用说明与注意事项

📖关于「间距比例尺」 ▼

间距比例尺是一款设计创意领域的在线工具。设计创意工具，可视化操作，一键生成 CSS 代码。