html 盒子模型 重复设置的生效

问题

下面两段代码，分别最终的padding-left是多少？

padding与padding-left两个属性同时会设置padding-left值，会有部分重复内容。

代码1：

<p  style="padding: 30px;padding-left: 40px;">关关教程</p>

代码2：

<p  style="padding-left: 40px;padding: 30px;">关关教程</p>

分析

两者设置并不存在优先级，而是根据先后顺序，写在后面的设置会覆盖前面的设置。

代码1中：padding:30px等价于padding-left等4个方向的值为30px；接下来设置padding-left:40px会覆盖padding-left，最终生效，padding的其它3个方向值仍为30px。

同理，代码2中生效的padding-left是30px。