一，對於block元素
padding是會影響元素的尺寸的。
DOM文檔：
<div class="box"></div>
css清單：
.box{ width:200px; height:200px; background-color: #ffed53; padding:20px; }
實際效果： 元素大小240*240 ，因為有padding:20px.
結論：padding會對block元素的尺寸產生影響。
二，對於block水平元素，但是width:auto或box-sizing為border-box的時候
DOM文檔：
<div class="box">文字的位置在哪里呢？</div>
css清單：
.box{ width:200px; height:200px; background-color: #ffed53; box-sizing:border-box; padding:0 10px; }
實際效果：box大小還是200*200,但是文字內容還是有了左padding----10px
當padding大小超過寬高時，
css樣式：
.box{ width:200px; height:200px; background-color: #ffed53; box-sizing:border-box; padding:0 200px; }
實際效果：400px*200px ----寬度為padding的寬度
結論：對於block水平元素，但是width:auto或box-sizing為border-box的時候,padding不會影響元素的尺寸....但是當padding
大小超過寬高時，寬高按padding的寬高顯示，里面的文字按最小寬度顯示。
最終結論：
對於block元素：
1，padding值暴走，一定會影響尺寸。
2，width非auto，padding影響尺寸。
3，width為auto或box-sizing為border-box，同時padding值沒有暴走，不影響尺寸。
三，對於inline水平元素
水平padding影響尺寸，垂直padding不影響尺寸，但會影響背景色（占據空間）
DOM文檔:
<span class="box">文字的位置在哪里呢？</span>
css樣式：
.box{
background-color: #ffed53;
padding:40px;
}
垂直padding影響了背景色。
如何利用這一特性：
實現高度可控的分隔線
1，直接使用字符：注冊 | 登錄
2，inline-block控制： 注冊 | 退出登錄
3，使用inline padding: 注冊 | 退出登錄
DOM文檔：
注冊<span></span>退出登錄
css清單：
span{ padding:16px 6px 1px; margin-left:12px; border-left:2px solid; font-size:0; }
3關於padding負值
padding不支持任何形式的負值
4，關於padding的百分比值
padding百分比均是相對於父元素的寬度計算的
運用，輕松實現一個正方形：
DOM文檔：
<div class="container"> <div class="box"></div> </div>
css清單：
.container{ width:100px; height:200px; } .box{ background-color: #8ec63f; padding:50%; }
50*50px的正方形：
不同手機分辨率正方形布局：
3，inline水平元素的padding百分比值
1，同樣相對於寬度計算
2，默認的高度寬度細節有差異
3，padding會斷行
<style> .container{ width:100px; height:200px; } .box{ background-color: #8ec63f; padding:50%; } </style> </head> <body> <div class="container"> <span class="box">若干文字</span> </div>
第三節 標簽元素的內置padding
1,ol/ul列表
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/checkbox單復選框內無內置padding；就算設置也沒用。
5. button 按鈕元素的padding最難控制；
1）. Chrome瀏覽器 padding設為0有效；
2）. FireFox瀏覽器設置padding：0左右依舊有padding；可以用button::-moz-focus-inner { padding:0 }設置padding為0。
3）. IE瀏覽器：IE7文字越多，左右padding逐漸變大！可以設置button { overflow： visible; }使左右padding為0；
4）. padding與高度計算的不兼容。
button{
line-height: 20px;
padding: 10px;
border : none;
}
高度：
- IE7: 45px; ?
- IE8+: 40px;
- FireFox: 42px; ？
- Chrome: 40px;
建議：<button id="btn"></button> <label for="btn">按鈕</label>
label{
display: inline-block;
line-height: 20px;
padding: 10px;
}
高度：
- IE7: 40px;
- IE8+: 40px;
- FireFox: 40px;
- Chrome: 40px;
第四節，圖形繪制
1，實現3道杠效果
備注：background-clip:content-box ; /**背景色不在padding區域顯示**/
2，實現白眼效果
第五節--css padding與布局
2，實現等高布局
3 ，兩欄自適應布局
