padding 中規中矩，性格溫婉平和！
第一節：CSS padding與容器的尺寸——了解padding與元素尺寸之間關系
CSS padding與容器的尺寸關系復雜
對於block水平元素 沒有padding的時候 .gay{width:50cm;} padding影響元素尺寸 （理解為人身體的脂肪，人和人之間的距離）.gay{width:20cm;padding:0 12px;}
但是width:auto或box-sizing為border-box的時候 .gay{width:80cm;box-sizing:border-box;padding:0 15px;}
.text{width:8cm;box-sizing:border-box;padding:0 1.5cm;}這個時候padding不會影響元素尺寸，但是當padding大小超過寬高的時候，.text{width:8cm;box-sizing:border-box;padding:0 8cm; }這時候元素按內聯元素最小寬度顯示，此時padding同樣影響了元素的尺寸。
結論：對於block水平元素
1.padding值暴走，一定會影響尺寸；
2.width：auto，padding影響尺寸；
3.width為auto或box-sizing為border-box，同時padding值沒有暴走，不影響尺寸。
對於inline水平元素
水平padding影響尺寸，垂直padding不影響尺寸 .leader{padding:50px},但是會影響背景色（占據空間）。大到比父元素還大的時候，設置overflow：auto會出現滾動條
如何利用這一特性
高度可控的分割線
1.直接使用字符：注冊|退出登錄
2.inline-block控制：注冊|退出登錄
3.使用inline padding：注冊|退出登錄
注冊<span></span>退出登錄
span{padding:16px 6px 1px;margin-left:12px;border-left:2px solid font-size:0;}
第二節：css padding負值和百分比值——了解padding特殊值的特殊表現
1.關於padding的負值，padding不支持任何形式的負值。
2.關於百分比均是相對與寬度計算的。
如何實現這一特性，輕松實現一個正方形 div:padding:50%(相對百分比計算)
真實案例
<div class="container">
<div class="example">
<h2>你的指尖</h2>
<h4>慕課網</h4>
</div>
</div>
.container{padding:50%;background:url(exp.jpg);background-size:100%;position:relative;} .example{position:absolute;top:0;right:0;bottom:0;left:0;}實現一個正方形的響應式布局。
3.inline水平元素的padding百分比值
1.同樣相對於寬度計算
2.默認的高度寬度細節有差異
3.padding會斷行
inline元素的padding斷行
span{padding:50%;}
<span syle="padding:50%;">內有文字若干</span>
如果是空的inline元素，高度還是要比寬度高
設置fon-size:0px；得到一個正方形。
為何會有額外的高度
inline元素的的那個會讓“幽靈空白節點”顯現，也就是規范中的strut出現。content-area，可以通過font-size:0px;讓他不顯示。
第三節：標簽元素的內置padding-這里有一些你可能不知道的小秘密
1.ol/ul列表
1.1 ol/li元素內置padding-left，但是單位是px不是em;
1.2 例如chrome瀏覽器下是40px;
1.3 如果字號很小，間距就會很開；
1.4 如果字號很大，序號回爬到容器外面
margin等一般em的。
2.表單元素的內置padding值
所有的瀏覽器input/textarea輸入框內置padding
所有瀏覽器button按鈕內置padding
部分瀏覽器select下拉內置padding，如firefox ie8+可以設置padding
所有瀏覽器radio/checkbox單選框無內置padding
button按鈕元素的按鈕是最難控制的。
1.chrome瀏覽器是沒有問題的。
2.firefox瀏覽器 設置padding:0左右依然有padding！ 需要設置button::-moz-focus-inner{padding:0;}padding才為0
3.IE瀏覽器 ie7文字越多，左右padding逐漸變寬。設置overflow:hidden以后就正常了。
4.padding與高度計算的不兼容
button{
line-height:20px;
padding:10px;
border:none;
}
IE7 45px;
IE8 40px;
FireFox 42px;
Chrome: 40px;
button表單按鈕padding
<button id="btn"></button>
<label for="btn">按鈕</label>
label{display:inline-block;inline-height:20px;padding:10px;}
讓button可見性隱藏。
第四節:padding與圖形繪制——利用padding來繪制圖形
實現3道杠——不借助偽元素，只用一個div
實現示意
<div class="line-tri"></div>
.line-tri{
width:150px;height:30px;
padding:15px 0;
border-top:30px solid;
border-bottom:30px solid;
background-color:currentcolor;
background-clip:content-box;
}
實現一個點
<div class="eye"></div>
.eye{
width:150px;
height:150px;
padding:10px;
border:10px solid;
border-radius:50%;
background-color:currentcolor;
background-clip:content-box;
}
第五節:padding布局實戰----padding在布局這塊比較好的應用
1.使用百分比單位構建比較固定比例布局結構
移動端1:1頭圖布局
div{padding:50%;}
2.配合margin實現等高布局。
.box{overflow:hidden;resize:vertical;}
.child-orange,.child-green{
margin-buttom:-600px;
padding-bottom:600px;
}
.child-orange{
float:left;
background:orange;
}
.child-green{
float:left;
background:green;
}
3.padding實現兩欄自適應布局
<div class="pbox">
<img src="mm.jpg" />
<div class="auto">
本例子實現。。。。
</div>
</div>
img{float:left;}
.auto{
padding-left:120px;
}