Press⌘+Kto search
IP: 获取中...
为效率而生, Just tools.goodssoft.com
间距计算器 - 设计间距系统生成工具
基于基准单位和比例类型生成统一的设计间距系统。支持线性、斐波那契、2的幂次等多种比例，一键导出CSS变量和Tailwind配置。
建议: 4px, 8px, 或 16px
间距系统预览
4px
xs
8px
sm
12px
md
16px
lg
24px
xl
32px
2xl
48px
3xl
64px
4xl
CSS变量
:root {
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 24px;
--spacing-2xl: 32px;
--spacing-3xl: 48px;
--spacing-4xl: 64px;
}Tailwind配置
spacing: {
'xs': '0.5',
'sm': '1',
'md': '1.5',
'lg': '2',
'xl': '3',
'2xl': '4',
'3xl': '6',
'4xl': '8'
}使用示例
CSS变量使用
.button {
padding: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}Tailwind使用
<div class="p-md mb-lg">
内容
</div># 什么是间距系统？
间距系统（Spacing System）是设计系统中用于定义和管理元素间距、内边距、外边距的规范化体系。 通过使用统一的间距单位，可以确保界面的一致性和视觉和谐，提升用户体验。 一个好的间距系统基于数学比例，能够创造出有韵律感和层次感的布局。
# 比例类型说明
- 线性比例 (Linear): 使用固定倍数递增，如0.5x, 1x, 1.5x, 2x等。简单直观，易于理解和计算，适合大多数项目。
- 斐波那契数列 (Fibonacci): 基于斐波那契数列（1, 1, 2, 3, 5, 8...），在自然界中广泛存在，能创造出自然的视觉和谐。
- 2的幂次 (Powers of 2): 使用2的幂次方（1, 2, 4, 8, 16...），常用于数字系统和UI框架，具有良好的可扩展性。
# 基准单位选择
- 4px: 最精细的间距单位，适合需要精细控制的项目
- 8px: 最常用的基准单位，符合4px网格系统，推荐大多数项目使用
- 16px: 较大的基准单位，适合需要更大间距的项目，如移动端应用
# 如何使用本工具
- 选择合适的基准单位（建议8px）
- 选择比例类型，预览生成的间距系统
- 根据需要调整基准单位，找到最合适的间距
- 点击"复制CSS变量"或"复制Tailwind配置"
- 将配置应用到您的项目中，确保团队统一使用
# 最佳实践
- 在整个项目中保持一致的间距系统，避免随意使用数值
- 使用语义化的命名（xs, sm, md, lg等）而非具体数值
- 与字体大小、行高等其他设计元素保持协调
- 在团队中建立文档，确保所有开发者了解和使用间距系统
- 定期审查和优化间距系统，适应项目需求变化
# 常见问题 (FAQ)
为什么需要间距系统？
间距系统确保了设计的一致性和专业性。没有统一的间距系统，设计师和开发者可能会随意选择间距值， 导致界面混乱、缺乏视觉韵律。统一的间距系统能提高工作效率，减少决策时间，并创造更和谐的用户体验。
如何选择合适的基准单位？
基准单位的选择应基于项目的视觉密度和目标平台。8px是最通用的选择，因为它符合大多数屏幕的像素密度， 且能被4和16整除，便于计算。如果项目需要更精细的控制，可以选择4px；如果是移动端或需要更大间距， 可以选择16px。
生成的间距可以直接用于Tailwind CSS吗？
完全可以。我们提供的Tailwind配置格式与Tailwind CSS的spacing配置完全兼容。 只需将生成的配置复制到tailwind.config.js的spacing部分，就可以使用p-md、m-lg等类名。 如果与默认spacing冲突，可以自定义命名空间或覆盖默认值。