CSS屬性講解之padding

1、padding與容器尺寸之間的關係

　　對於block水平元素：①padding值暴走，一定會影響尺寸；②width非auto，padding影響尺寸；③width為auto或box-sizing為border-box，同時padding值沒有暴走，不影響尺寸。

　　對於inline水平元素：水平padding影響尺寸，垂直padding不影響尺寸，但是影響背景色。當垂直padding大到超出父容器，會影響scrollHeight。

2、padding負值和百分比值

　　關於padding負值：padding不支援任何形式的負值。

　　關於padding百分比值：padding百分比皆是相對於寬度計算的。

　　inline水平元素的padding百分比值：①同樣相對於寬度計算；②預設的高度寬度細節有差異；③padding會斷行。

3、標籤元素的內建padding

　　ol/ul清單：ol/li元素內建padding-left，但單位是px不是em，例如chrome瀏覽器下是40px，所以字號很小間距就會很大，字號很大序號就會爬出容器。 小經驗：文字大小為12-14px時，padding-left取值22-25px會比較適合。

　　其他元素：①所有瀏覽器input/textarea輸入框內建padding；②所有瀏覽器button按鈕內建padding；③部分瀏覽器select下拉內建padding，如Firfox IE8+可設定padding；④所有瀏覽器radio/checkbox單複選框無內建padding；⑤button按鈕元素的padding最難控制。

　　button表單按鈕padding：

　　

　　

　　

　　

。做按鈕的時候多用標籤去模擬按鈕

　　

4、padding與圖形繪製

##### ##　　############5、padding與佈局##########　　使用百分比單位建立固定比例佈局結構：######　　######## ##　　配合margin等高佈局：######　　##########　　兩欄自適應佈局：#####　　######　#######

以上是CSS屬性講解之padding的詳細內容。更多資訊請關注PHP中文網其他相關文章！