间距Space
你可能会说
元素都堆在一起了，帮我把留白调舒服点：相关的靠近，不相关的分开。
间距是用内容之间的留白表达关联和分组关系的布局规则表单标签应靠近对应输入框，两个不同设置组之间则留出更大空白。项目应复用固定间距档位，不要为每个位置任意填写数值。
什么时候用
- 分组相关内容：标签贴着输入框，离下一组远一点姓名林小hu邮箱you@example.com
- 卡片内留白：内容别顶着边框，留一圈呼吸感
- 按钮之间留缝：根据按钮大小和关系留出清楚间隔取消保存
- 复用间距档位：让相同关系保持一致小中大
什么时候不用
- 所有间距都一样：无法区分组内与组间关系
- 间距太小：元素互相紧贴，分组和层级难以辨认取消保存预览
- 间距忽大忽小没规律：同类关系使用了不同距离
- 用空格或空行模拟间距：更换字体或内容后容易错位价格 ¥ 199库存 42 件拿全角空格凑对齐，字体一换全错位
组成结构 · Anatomy
这个卡片和别人之间的距离
内容和卡片边框之间的留白
内部元素互相之间的距离
常见变体 · Variants
紧凑Compact · 4px
同组小元素贴紧一点，如图标和文字
适中Medium · 8px
同组元素之间的默认距离
宽松Loose · 16px
不同模块之间拉开，分组更清楚
典型使用场景
表单字段分组
姓名
邮箱
标签靠近对应输入框，不同字段组之间拉开距离
卡片内边距
内边距
项目动态
林小hu 完成了「首页改版」的原型评审
内容与卡片边框之间保留一致的内边距
按钮组间隔
按钮之间留出清楚间隔，不挤也不分家
列表呼吸感
设计评审
今天 14:00 · 3 人参加
需求对齐会
明天 10:30 · 6 人参加
版本发布走查
周五 16:00 · 全员
每行保持一致的纵向留白，列表更容易扫读
延伸阅读 · 权威出处