padding詳解

padding屬性指定了盒的padding區的寬度。'padding'簡寫屬性一次性設置四周的padding，而其它padding屬性只設置它們各側的

padding與元素的尺寸

padding與block和inline元素尺寸

最後一個例子是用padding實現高度可控的分隔線

padding與百分比值

padding百分比值與block元素

padding百分比值與inline元素

在inline元素中,padding:50%產生的不是一個正方形,緣由是根據CSS規範,inline元素的垂直padding會讓strut出現,strut本質上是一個inline文本,出如今content area區域,爲了消除它,要使用font-size:0

標籤元素的內置padding

ol/ul列表的內置padding

1. ol/li元素內置padding-left，可是單位是px不是em；

2. Chrome瀏覽器下是40px；

3. 因此若是字號很小，間距就會很開；字號很大，序號會爬到容器外面

4. 開發過程當中爲使序號與其餘內容對齊，文字大小12px或14px，padding-left爲22px至25px

表單元素的內置padding

1. 全部瀏覽器input/textarea輸入框內置padding

2. 全部瀏覽器button按鈕內置padding

3. 部分瀏覽器select下拉內置padding，如FireFox IE8+能夠內置padding

4. 全部瀏覽器radio/chexkbox單複選框無內置padding

button在各大瀏覽器中去除空隙

button在不一樣瀏覽器中高度不一樣現象及解決方案

咱們使用button以及label標籤,將button使用絕對定位或者z-index隱藏,而後讓label標籤for="btnid"指向button的id

padding與圖形繪製

三道槓以及眼睛效果

對於三道槓效果來講,透明區域是padding實現的,第一道槓使用border-top,第三道槓使用border-bottom,第二道槓使用background-color:currentColor,爲了控制第二道槓不覆蓋padding背景色,使用CSS3屬性background-clip:content-box

第二個例子同上

padding與佈局

移動端1:1頭圖佈局

div{padding:50%;}

配合margin實現等高佈局

等高佈局

兩欄自適應佈局

分別在容器上和子元素的兩欄自適應佈局