CSS间距计算器
在线CSS间距计算器，按基准单位与比例生成间距系统，预览各级spacing并导出CSS变量与Tailwind配置，适用于设计系统与组件库开发。
已就绪，修改参数后会实时生成。
计算设置
建议：4px、8px 或 16px
间距系统预览
CSS变量
:root {
--spacing-md: 12px;
}Tailwind配置
spacing: {
'md': '12px'
}使用示例
CSS变量使用
.button {
padding: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}Tailwind使用
<div class="p-md mb-lg"> 内容 </div>
工具说明
CSS间距计算器用于生成统一的间距系统（spacing tokens），并导出CSS变量与Tailwind配置，帮助团队在页面排版和组件库开发中保持一致的留白节奏。
什么是间距系统
间距系统用于规范元素的内边距、外边距与模块间距。通过语义化的间距档位（如 xs/sm/md/lg），可以减少随意取值带来的不一致，提高设计评审与前端落地效率。
比例类型说明
线性比例 (Linear)
按固定倍数递增（如 0.5x、1x、1.5x、2x）。易理解、便于维护，适合大多数项目。
斐波那契数列 (Fibonacci)
基于 1, 1, 2, 3, 5, 8... 的增长节奏，间距层级更自然，适合强调视觉韵律的界面。
2的幂次 (Powers of 2)
按 1, 2, 4, 8, 16... 扩展，层级跨度更大，适用于需要明显层次区分或大屏布局的场景。
基准单位选择
- 4px: 更精细的间距单位，适合需要高密度排版或微调较多的项目。
- 8px: 最通用的选择，符合常见的 8px 网格体系，推荐大多数 Web/后台项目。
- 16px: 更宽松的留白，适合移动端、内容型页面或需要更大间距的界面。
使用步骤
- 选择基准单位（如 8px），作为间距系统的基础。
- 选择比例类型，查看各档位间距的预览与像素值。
- 复制导出的 CSS 变量或 Tailwind spacing 配置。
- 将代码粘贴到项目样式或 tailwind.config.js 中统一使用。
最佳实践
- 尽量只使用生成的档位，不要在页面中到处写“随手的 px 数字”。
- 优先使用语义化命名（xs/sm/md/lg），便于团队沟通与维护。
- 让间距系统与字号、行高、网格体系一起制定，整体更协调。
- 在组件库中固化常用 spacing tokens，减少重复决策。
常见问题
为什么需要间距系统？
统一的间距系统能提升界面一致性与专业感，减少“凭感觉”选值带来的返工，同时也便于设计走查与前端验收。
生成的 Tailwind 配置可以直接用吗？
可以。将输出复制到 tailwind.config.js 的 spacing（建议放在 theme.extend.spacing）即可使用 p-md、m-lg 等类名。
如何避免与 Tailwind 默认 spacing 冲突？
推荐使用 theme.extend.spacing 进行扩展；如果需要覆盖默认值，请确保团队约定统一，并在组件库中集中管理。
隐私说明
本工具不会上传输入内容或计算结果，所有计算、预览与代码生成都在浏览器本地完成。