间距Space
按钮与基础样式用留白表示内容之间的远近关系
相关内容应该靠近，不同分组应该拉开，这些空白就是间距。项目里通常会约定一组可重复使用的间距档位，让页面保持规律，而不是每次随手填写一个数值。
8
16
24
什么时候用
- 分组相关内容：标签贴着输入框，离下一组远一点姓名林小hu邮箱you@example.com
- 卡片内留白：内容别顶着边框，留一圈呼吸感
- 按钮之间留缝：8~12px，不挤也不分家取消保存
- 数值用 8 的倍数：8、16、24、32，全站统一81624
什么时候不用
- 所有间距都一样：看不出谁和谁是一组
- 间距太小：元素互相紧贴，分组和层级难以辨认取消保存预览
- 间距忽大忽小没规律：3px、21px 凭手感来
- 拿空格、空行凑距离：换个字体就全错位价格 ¥ 199库存 42 件拿全角空格凑对齐，字体一换全错位
组成结构 · Anatomy
1外边距Margin这个卡片和别人之间的距离
2内边距Padding内容和卡片边框之间的留白
3元素间距Gap内部元素互相之间的距离
常见变体 · Variants
紧凑Compact · 4px
同组小元素贴紧一点，如图标和文字
适中Medium · 8px
同组元素之间的默认距离
宽松Loose · 16px
不同模块之间拉开，分组更清楚
典型使用场景
表单字段分组
姓名
16
邮箱
标签贴输入框 4px，组与组拉开 16px
卡片内边距
padding 16
项目动态
林小hu 完成了「首页改版」的原型评审
内容和卡片边框之间留 16px 呼吸感
按钮组间隔
按钮之间留 8px 的缝，不挤也不分家
列表呼吸感
设计评审
今天 14:00 · 3 人参加
需求对齐会
明天 10:30 · 6 人参加
版本发布走查
周五 16:00 · 全员
每行上下各留 10px，列表扫起来才不累