6.9 CSS 尺寸速写

设置4个位置的值

我们可以把4个位置（top, bottom, left 和 right）写在一个CSS属性中，也就是CSS属性的速写形式。

比如 padding 就是4个位置变体（padding-top, padding-bottm, padding-left 和 padding-right）的速写。

padding 可以一次性把所有位置设置成相同的值：

blockquote{ padding: 20px;}
/* 等同于 */
blockquote{ padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px;}

padding 还可以分别给不同的位置设置不同的值，把多个值以空格分开连接在一起：

blockquote{ padding: 20px 0 10px 50px;}

这个时候就需要知道上述规则中的位置顺序，来对应不同的值。从左到右分别是：top, right, bottom 和 left。

设置2个或3个值

如果只设置两个值，那么第一个将应用于 top 和 bottom 上面，第二个用于 right 和 left：

blockquote{ padding: 20px 0;}
/*
       top
       20px
left         right
 0             0
      bottom
       20px
*/

看起来有点复杂，其实你可以想象有一个转盘，从0点（12点）开始顺时针方向旋转（上、右、下、左）。然后再加上对称位置可共享相同值即可。 比如只有2个值的时候，按顺序就是只定义了top和right，而bottom分享top的值，left分享right的值。 再比如只有3个值的时候，按顺序就是只定义了top、right和bottom，剩下的left分享right的值。

所有需要使用4个位置的属性都可以运用该转盘规则：

• margin
• padding
• border-width

这里需要特别说明一下 border 属性的用法，如前所述 border 是下面3个属性的速写：

• border-width
• border-style
• border-color

其中 border-width 属性支持转盘规则定义，但是两者不能混合起来用：

blockquote{ border: 1px 0 solid green;}
/* 不工作 */

这种情况，正确的写法是把 border-width 单独分开来定义：

blockquote{ border: solid green; border-width: 1px 0;}