CSS填充中的第三个值是什么？

Question

我正在使用Less Framework 3,我在css中看到了这一行:

body {
    padding: 60px 42px 0;
    width: 396px;
}

怎么padding: 0办？

这看起来不像普通的CSS速记,而且top-right-bottom看起来很奇怪.

Answer 1

将padding和margin属性指定top right bottom left.
如果left省略,则默认为right.

因此,padding: a b c相当于padding: a b c b.

如果bottom也省略,则默认为top.
因此,padding: a b相当于padding: a b a b.

如果right是也省略,则单一值被用于所有4个侧面.
因此,padding: a相当于padding: a a a a.

Answer 2

当你指定三个值时,第二个隐式用于第四个,即填充:60px 42px 0 42px;

Answer 3

指定四个厚度值时有三种简写版本.这些快捷方式也适用于类似的属性,例如边距,轮廓和边框.

指定1个值:

margin: 10px;
/*same as*/
margin: 10px 10px 10px 10px;

...意味着对所有4个边使用10px.

margin: 10px 15px;
/*same as*/
margin: 10px 15px 10px 15px;

...表示顶部和底部使用10px,左右使用15px.

margin: 10px 15px 20px;
/*same as*/
margin: 10px 15px 20px 15px;

...表示顶部使用10px,左侧和右侧使用15px,底部使用20px.