CSS两种padding写法效果是否一致？哪种代码风格更优？

两种CSS写法都可以正常生效，最终渲染效果完全一致，浏览器解析后的属性计算值没有任何区别，也不存在性能差异。
核心逻辑来自CSS的基础层叠规则：同一选择器下、权重相同的同名属性，后书写的会覆盖先书写的值。第二种写法里的padding: 80px是简写属性，本质是同时给上、右、下、左四个方向的内边距都赋值80px，后续单独声明的padding-right: 20px会把右内边距的值覆盖为20px，最终效果和第一种逐一声明四个方向内边距的写法完全匹配。

没有绝对的“标准答案”，可以根据团队规范、项目场景灵活选择：

• 第一种逐一声明单方向属性的写法：不需要记忆CSS简写属性的赋值顺序，扫一眼代码就能直接拿到每个方向的内边距数值，对CSS新手更友好，也能避免后续维护时误删覆盖类属性导致的样式错乱问题；缺点是代码冗余度高，重复书写padding-*前缀比较繁琐。
• 第二种简写+单属性覆盖的写法：代码更精简，能快速传递出“三个方向内边距统一为80px，仅右侧做特殊设置为20px”的设计意图；所谓的“隐患”只存在于开发者不了解CSS简写属性规则、不知道简写会重置所有对应子属性的前提下，对熟悉CSS基础规则的开发者来说不存在额外风险。

实际开发中还有兼顾可读性和简洁度的更优写法，直接使用padding简写的四值语法即可，既不需要冗余的单属性声明，也不需要额外写覆盖逻辑：

body {
  margin: 0;
  /* 简写赋值顺序固定为：上、右、下、左 */
  padding: 80px 20px 80px 80px;
}

当多个方向属性值相同、仅单个方向值特殊时，这种写法的维护成本最低。

内容的提问来源于stack exchange，提问作者Flavio