UI 间距系统：为什么是 8 的倍数

界面看起来"专业"还是"业余"，很多时候不取决于配色和图标，而取决于间距是否统一。8pt 网格就是解决这个问题的。

8 的倍数从哪来

大多数屏幕的像素密度让 8px 成为一个舒适的视觉单位。4px 用于极小的间隙（图标和文字之间），8px 是基础单位，16、24、32、48、64 依次递增。这套数字在视觉上等差感明显，又不会出现 13、17 这种"说不出理由"的值。

怎么用

把间距定义成一组变量，而不是每次手动填：

--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;

然后规定用途：图标与文字 4，组件内部 8 到 12，组件之间 16，区块之间 24 到 32，页面边距移动端 16、桌面端 24 到 32。

常见错误

一是内外边距混淆。一个卡片的内边距 16，外部间距却是 20，视觉上就不齐。内部和外部要用同一套刻度。

二是"差不多就行"。这次 14，下次 18，单看都没问题，放在一起就歪。这就是为什么需要系统而不是手感。

三是间距和字号不匹配。12px 的小字配 32px 的大间距，会显得空；24px 的标题配 8px 间距，会显得挤。通常间距要跟字号成比例。

垂直节奏

页面从上到下应该有一种"呼吸节奏"：标题到正文近一点（8-12），正文到下一个模块远一点（32-48）。如果所有间距都差不多，页面就会平。

一个实用技巧：把页面截图，眯起眼睛看。能看出"块"和"块"之间的分界，说明节奏成立；看不出，说明间距全挤在一起了。

移动端要单独考虑

手指的点击热区约 44px，所以按钮高度不能小于 44，间距也要相应放大。桌面端 8pt 的刻度在手机上可以保持，但最小触控目标要单独约束。

最后：8pt 是工具不是教条。遇到特殊尺寸（比如图标本身是 20px 宽），允许微调，但要有理由，且全站统一。规则的价值在于"一致"，不在于"绝对精确"。