padding會增加元素尺寸，padding:0 15px;
padding不會影響元素尺寸：box-sizing:border-box padding:0 15px;（此時，外邊框的寬不會變化，內容縮小）
如果左右的padding值比width還要大，那麼還是會影響元素尺寸的。
對於inline水平元素：水平padding影響尺寸，垂直padding不影響。
如果加上背景色，
高度可控的分割線：
直接使用字符：註冊|退出登錄
inline-block控制：註冊 | 退出登錄
使用inline padding
註冊<span></span>退出登錄
span{ padding:16px 6px 1px;margin-left:!2px; border-left: 2px solid; font-size:0}
padding的負值和百分比值：
padding的百分比是相對於寬度計算的。
實現應正方形：div{padding:50%}
比如實現app頁面，用H5，那麼怎麼才能適應所有屏幕呢，實現一個正方形：
padding:50% ; 兼容性會更好。
padding還會出現斷行：比如div裏面有文字，padding：50% ，不夠寬的話，文字會掉下來，設置個背景色就更明顯看出來了。
標籤元素的內置padding：
元素很多內置的一些padding值，尤其是margin值，基本上都是以em爲單位，
平時的網頁字體大小：12px 14px
但是用padding-left的話： 22px --25px
所有瀏覽器的input、textarea輸入框內置padding值(設置了padding也沒用)
所有瀏覽器的按鈕有內置padding【chrome可以；火狐下設置padding:0;左右依然有padding。此時：button::-moz-focus-inner{padding:0;}此時真的padding爲0l了；IE瀏覽器：IE7文字越多，左右的padding越大button:{overflow:visible};padding與高度的計算是不兼容的，所以button的兼容性不好，以後要用a標籤去模擬按鈕，
button表單按鈕padding：
<button id="btn"></button>
<label for="btn">按鈕</label>
label{
display:inline-block;
inline-height:20px;
padding:10px;
}
這種方法，IE7\8 chrome firefox都兼容。
對於button，可以決定定位到之外，或者z-index藏在背景之下。
】
部分瀏覽器select下內置padding，比如火狐、IE8+可以設置padding
【padding可以用來繪圖】
可以使用padding來實現三道槓{三}（一般瀏覽器都會有）
可以讓背景只在內容區域顯示：
<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-slip:content-box;
}
案例二：用HTML實現一個圓：
<div class="eye"></div>
.eye{
width:150px;height:30px;
padding:10px;
border:10px solid;
border-radius:50%;
background-color:currentcolor;
background-slip:content-box;}
【padding構建固定比例】
padding實現兩欄自適應佈局：