padding四值顺序必须是top right bottom left，浏览器按顺时针硬性匹配；三值时left自动等于right，两值时上下/左右分别对称；需独立控制某边或强调可读性时应改用单边属性。
padding简写顺序不是“可选规则”，而是浏览器解析的硬性逻辑：漏一个值，整个计算方式就变。 写错顺序或省略值，不会报错，但布局会悄悄偏移——尤其在响应式断点切换时更难排查。
padding四值顺序必须是top right bottom left
这是CSS规范强制要求的顺时针顺序，不是记忆技巧。浏览器按这个固定位置匹配每个数字：
-
padding: 10px 20px 30px 40px→ 上=10px、右=20px、下=30px、左=40px - 写成
padding: 10px 20px 40px 30px就是左=30px、右=20px，左右不对称却很难一眼发现 - 用缩写时别依赖“视觉对齐”：数值列得再整齐，顺序错了照样错
三值写法中left会被自动补为right值
很多人以为 padding: 10px 20px 30px 是「上/右/下」，左边留空=0，其实不是：
- 它等价于
padding: 10px 20px 30px 20px（左 = 右） - 想让左边是5px、右边是20px？必须写四值：
padding: 10px 20px 30px 5px - 这种自动补全只发生在三值场景，且只补左值；两值时上下/左右各自对称，不涉及“补”
什么时候该放弃简写，改用单边属性
当需要独立控制某一边、或存在条件覆盖（比如媒体查询中只调右边）、或团队协作中强调可读性时，简写反而增加理解成本：
立即学习“前端免费学习笔记（深入）”；
- 要动态改右边距？
padding-right: 12px比从四值里找第二个数安全得多 - 用 CSS 自定义属性做主题切换？
padding-top: var(--spacing-sm)比padding: var(--spacing-sm) var(--spacing-md) ...更易维护 - inline 元素（如
<span>）对padding-top/padding-bottom支持不稳定，此时单写比简写更容易暴露问题
最常被忽略的一点：padding 的简写行为和 margin 完全一致，但二者语义不同——混用时哪怕顺序没错，也容易因“外扩 vs 内撑”的逻辑错位导致背景色、边框、点击热区等意外表现。
