padding

簡寫屬性語法:

padding:[ <length> | <percentage> ]{1,4}

預設值看每個獨立屬性

適用於:所有元素,除table-row-group | table-header-group | table-footer-group | table-column-group | table-row

繼承性:無

動畫性:看每個獨立屬性

計算值:看每個獨立屬性

媒 體:視覺

分拆獨立屬性語法:

padding-*<length> | <percentage>

padding-* = padding-top,padding-right,padding-bottom,padding-left

預設值0

適用於:所有元素,除table-row-group | table-header-group | table-footer-group | table-column-group | table-row

繼承性:無

動畫性:是

計算值:指定的百分比或絕對長度值

媒 體:視覺

取值:

<length>
用長度值來定義內補白。不允許負值
<percentage>
用百分比來定義內補白。水平(預設)書寫模式下,參照其包含塊的width進行計算,其它情況參照height,不允許負值

說明:

簡寫屬性。為元素設定所有四個方向(上右下左)的內邊距。
  • padding屬性接受1~4個參數值。如果提供四個參數值,將按上、右、下、左的順序作用於四邊;提供三個,第一個用於上,第二個用於左、右,第三個用於下;提供兩個,第一個用於上、下,第二個用於左、右;只提供一個,同時用於四邊。
  • 需要注意的是,當我們為行內元素定義縱向內補白(padding-top/padding-bottom)時,雖然不需要將之轉化為行內塊或者塊級,但是給行內元素設定縱向內補白並不會影響布局。內補白會在目前元素的行框基礎上向頂部和頂部外延,但是這些外延不會拓展新的布局大小(你甚至可以把它想象成類似outline)。
  • 對應的腳本特性為:padding
分拆獨立屬性。為元素單獨設定上、右、下、左4個方向的內邊距。
  • 對應的腳本特性分別為:paddingTop, paddingRight, paddingBottom, paddingLeft

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0+ 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+

示例: