4px倍数是主流设计系统的基础单位，因在视觉节奏、可读性与像素对齐间取得平衡；须贯穿盒模型全链路（padding/margin/border-width/border-radius），并以box-sizing: border-box为前提。
为什么4px倍数不是随便定的
4px是当前主流设计系统（如Ant Design、Material UI）采用的基础单位，它在视觉节奏、可读性与像素对齐之间取得平衡：2px太细难识别，8px又容易造成间距松散。关键在于，这个倍数必须贯穿整个盒模型计算链——padding、margin、border-width、甚至border-radius都要落在4px的整数倍上，否则视觉节奏会断裂。
box-sizing: border-box 是前提，不是选项
不设box-sizing: border-box，所有基于4px的尺寸控制都会失效。因为content-box下，width: 100px + padding: 8px + border: 2px = 实际占位120px，你根本无法用“100px容器放两个48px子项”这种直觉做布局。
- 全局重置必须写成：
*, *::before, *::after { box-sizing: border-box; }，不能只写html或body - 第三方组件库（如Element Plus）可能覆盖该规则，需在它们的CSS后加
!important强制继承 -
iframe、video等替换元素默认不继承box-sizing，需单独声明
padding/margin 的4px阶梯怎么分层
直接写padding: 4px或margin: 8px只是起点。真正要建标准，得按语义分层，比如：
-
--spacing-xs: 4px—— 图标内边距、小标签间距 -
--spacing-sm: 8px—— 按钮内边距、表单项垂直间隔 -
--spacing-md: 12px—— 卡片内边距、列表项间距 -
--spacing-lg: 16px—— 模块间外边距、栅格列间隙
注意：避免用padding: 12px 16px这种混合值，统一用padding: var(--spacing-md) var(--spacing-lg)，方便后期批量调整。
立即学习“前端免费学习笔记（深入）”；
border 和 border-radius 的4px陷阱
很多人忽略border-width和border-radius也必须是4px倍数，否则会破坏网格对齐感：
-
border: 1px solid #eee看似精细，但1px在2x屏上是物理1px，实际渲染为0.5px，易发虚；改用border: 2px solid #eee更稳 -
border-radius: 4px是基础圆角，按钮用8px，卡片用12px，保持与padding层级一致 - 慎用
border-radius: 50%——它不参与4px体系，除非明确需要正圆（如头像）
最易被忽略的是outline：调试时用outline: 2px solid red没问题，但上线前必须删掉，因为它不走盒模型计算，会额外撑开空间且不可控。
