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 respective .
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 respective .
依序是上內邊距,右內邊距,下內邊距,左內邊距
如果只有一個值,那麼應用在所有(四個)方向上
如果只有兩個值,則第一個值是上下內邊距,第二個值是右左內邊距
如果只有三個值,則第一個值是上內邊距,第二個值是左右邊距,第三個值是下內邊距
如果是四個值,則依序為,上內邊距,右內邊距,下內邊距,左內邊距
上 右 下 左 ,如果哪個沒寫,就跟對面一樣。
右上左下
上(左、右)下
(上、下)(右、左)
(全部)
padding:2em 2em 0;
相當於padding:2em 2em 0 2em;
(你「左」沒有設定值,預設會跟你「右」的值一樣)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 的設定都是遵從順時針轉的,
例如
不同參數數量可以參考下圖: