首页 > padding:2em 2em 0;和padding:2em 2em 0 0;的区别?

padding:2em 2em 0;和padding:2em 2em 0 0;的区别?

padding:2em 2em 0;和padding:2em 2em 0 0;的区别?
还有padding:0 2em 1em 和padding:0 0 2em 1em的区别?



padding,margin,这两个属性的控制都差不多,只是控制的范围不一样。
padding是内边距,即content到border的范围。
margin是外边距,即border外面的范围大小。
一般而言。都可以有四个值,即top(上),right(右),bottom(下),left(左),沿着顺时钟方向。
如果是一个值:表示上右下左都是这个值。
如果是两个值:第一个值是上下,第二个值是左右。
如果是三个值:第一个是上下的,第二个值是右的,第三个是左的。
如果是四个值:第一第二第三第四,分别是上右下左的值。

所以padding:0 2em 1em 和padding:0 0 2em 1em的区别就是
第一个:上下是0,右是2em,左是1em。
第二个:上是0,右是0,下是2em,左是1em。


不同参数个数可以参照下图:


marign 与 padding 的设置都是遵从顺时针转的,
例如

padding: 0 2em;  第一个值设置的是上下,第二个值设置的是左右;
padding: 0 2em 0; 第一个值是上,第二个值是左右,第三个值就是下;
padding 0 2em 0 2em;  就是顺时针转了,上右下左了。

上 右 下 左 ,如果哪个没写,就跟对面一样。


padding,margin,border-width之类的都是这种规则(可以按照这种方式理解,不过似乎标准上并不是这么写的)
四个值
第一个值控制上下左右,第二个值控制左右,第三个值控制下,第四个值控制左。
同时靠后的值会覆盖靠前的值。

===========================================
刚刚翻了一下 w3c(链接)
是这么说的

The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' at the same place in the style sheet.

If there is only one component value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

依次是 上内边距,右内边距,下内边距,左内边距
如果只有一个值,那么应用在所有(四个)方向上
如果只有两个值,则第一个值是上下内边距,第二个值是右左内边距
如果只有三个值,则第一个值是上内边距,第二个值是左右边距,第三个值是下内边距
如果是四个值,则依次为,上内边距,右内边距,下内边距,左内边距


padding:2em 2em 0; 相当于 padding:2em 2em 0 2em;(你“左”没有设置值,默认会跟你“右”的值一样)

【热门文章】
【热门文章】