CSS padding简写失效 拆分为四行单独设置样式却可正常生效的原因

根本原因 #

这个问题没有涉及复杂的样式优先级、浏览器兼容问题，纯粹是CSS语法细节导致的解析失败：

• CSS 规则里，所有简写属性配置多个数值时，值与值之间必须用空格分隔，逗号不属于合法的分隔符号
• 你注释掉的代码写法 padding: 0.5rem,2rem,0.5rem,2rem; 因为全程用逗号分隔数值，属于非法的CSS声明，浏览器解析到这行时会直接判定语法错误，跳过这行不应用任何样式
• 你拆成 padding-top、padding-bottom 这类单边属性分别书写时，每一行都是符合语法的独立声明，没有解析错误，所以样式可以正常生效
• 这类手滑打错分隔符的问题，通常不会触发编辑器的强报错，浏览器的解析警告也很容易被忽略，经常会排查半天优先级才发现是基础语法疏漏。

正确写法参考 #

对应你需要的「上下内边距0.5rem、左右内边距2rem」的效果，合法的padding简写可以写为：

• 标准四值顺序（上、右、下、左）：
  padding: 0.5rem 2rem 0.5rem 2rem;
• 更简洁的两值写法（第一个值控制上下内边距，第二个值控制左右内边距）：
  padding: 0.5rem 2rem;

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