CSS屬性講解之padding

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

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

2、padding負(fù)值和百分比值

　　關(guān)于padding負(fù)值：padding不支持任何形式的負(fù)值。

　　關(guān)于padding百分比值：padding百分比均是相對于寬度計(jì)算的。

　　inline水平元素的padding百分比值：①同樣相對于寬度計(jì)算；②默認(rèn)的高度寬度細(xì)節(jié)有差異；③padding會斷行。

3、標(biāo)簽元素的內(nèi)置padding

　　ol/ul列表：ol/li元素內(nèi)置padding-left，但是單位是px不是em，例如chrome瀏覽器下是40px，所以字號很小間距就會很大，字號很大序號就會爬出容器。小經(jīng)驗(yàn)：文字大小為12-14px時(shí)，padding-left取值22-25px會比較合適。

　　其他元素：①所有瀏覽器input/textarea輸入框內(nèi)置padding；②所有瀏覽器button按鈕內(nèi)置padding；③部分瀏覽器select下拉內(nèi)置padding，如Firfox IE8+可以設(shè)置padding；④所有瀏覽器radio/checkbox單復(fù)選框無內(nèi)置padding；⑤button按鈕元素的padding最難控制。

　　button表單按鈕padding：

　　正因?yàn)槿绱�，我們在做按鈕的時(shí)候多用<a>標(biāo)簽去模擬按鈕

4、padding與圖形繪制

5、padding與布局

　　使用百分比單位構(gòu)建固定比例布局結(jié)構(gòu)：

　　配合margin等高布局：

　　兩欄自適應(yīng)布局：

以上就是CSS屬性講解之padding的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！