本文属于“前端设计基础”系列。间距会直接影响设计四原则中的亲密性与对齐，也会参与视觉层次的建立。

界面显得凌乱，很多时候不是颜色或字体的问题，而是相似关系使用了不同间距、不同模块又挤在了一起。间距系统的任务，是把空间变成一种有规则的语言。

为什么常用 4 点或 8 点系统

以 4px 或 8px 为基础单位，可以生成 4、8、12、16、24、32、48、64 等有限数值。4 点系统适合密集界面，8 点系统更简洁，也更容易限制随意取值。

这不代表所有尺寸必须是 8 的倍数。1px 边框、图标内部尺寸和字体本身有独立逻辑。基础单位主要约束组件之间的 padding、margin 和 gap。

用间距表达关系

相关内容应该靠近，不相关内容应该拉开。例如标签与输入框之间可以是 4—8px，不同表单项之间可以是 16—24px，不同页面章节之间可以是 48—96px。

判断间距是否正确时，先问“这两个元素是什么关系”，不要只问“这里看起来空不空”。组间距应明显大于组内距，否则用户无法快速识别分组。

布局网格解决对齐

桌面页面常使用 12 列网格，因为它可以方便地分成二、三、四或六等份；平板可以缩减为 8 列，移动端常使用 4 列。网格还需要定义最大内容宽度、页面边距和列间距。

网格不是让每个元素都铺满列，而是提供共享的边线。标题、正文、卡片和操作区落在一致的边线上，页面就会自然显得有秩序。

把间距写成 token

命名 token 比散落的像素值更容易维护，也方便在紧凑和舒适两种密度之间切换。

好的间距系统不会让用户注意到空间本身，却会让所有内容更容易理解。

更多布局和组件参考，可以访问 StyleKit。