css - padding:2em 2em 0;和padding:2em 2em 0 0;的区别?
伊谢尔伦
伊谢尔伦 2017-04-17 13:37:02
0
7
1019

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

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回覆(7)
Peter_Zhu

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 .

依序是上內邊距,右內邊距,下內邊距,左內邊距
如果只有一個值,那麼應用在所有(四個)方向上
如果只有兩個值,則第一個值是上下內邊距,第二個值是右左內邊距
如果只有三個值,則第一個值是上內邊距,第二個值是左右邊距,第三個值是下內邊距
如果是四個值,則依序為,上內邊距,右內邊距,下內邊距,左內邊距

黄舟

上 右 下 左 ,如果哪個沒寫,就跟對面一樣。

Peter_Zhu
  • 右上左下

  • 上(左、右)下

  • (上、下)(右、左)

  • (全部)

Peter_Zhu

padding:2em 2em 0; 相當於 padding:2em 2em 0 2em;(你「左」沒有設定值,預設會跟你「右」的值一樣)

Peter_Zhu

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;  就是顺时针转了,上右下左了。
伊谢尔伦

不同參數數量可以參考下圖:

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板