浏覽器支持
所有浏覽器都支持 padding 屬性。
注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
定義和用法
padding 簡寫屬性在一個聲明中設置所有內邊距屬性。
說明
這個簡寫屬性設置元素所有內邊距的寬度，或者設置各邊上內邊距的寬度。行內非替換元素上設置的內邊距不會影響行高計算；因此，如果一個元素既有內邊距又有背景，從視覺上看可能會延伸到其他行，有可能還會與其他內容重疊。元素的背景會延伸穿過內邊距。不允許指定負邊距值。
注釋：不允許使用負值。（以上來自w3school）
padding變化是否會影響容器的尺寸
1.對於block元素
如果寬度非auto那麼容器會變大，如果容器寬度自適應或者設置了box-sizing:border-box,並且值在可控區間內是不會影響內容寬度的，如果值暴走那麼容器肯定會變化。
復制代碼代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>DEMO</title>
<style>
*{padding: 0;margin: 0;}
.test {width: 300px;background: blue;box-sizing: border-box;padding:0 300px;}
.test2 {width: 300px;background: yellow;}
</style>
</head>
<body>
<div class="test">文字在那裡</div>
<div class="test2">文字在那裡</div>
</body>
</html>
效果圖
上面的代碼運行說明了當padding值暴走的時候裡面的文本只按照最小的單個字體作為一行content區域的寬度已經被充沒了。
2. 對於內聯元素
內聯元素的padding只會影響左右尺寸，上下尺寸不影響但是背景色會顯現，當上下值暴走的時候會影響外容器的高度。
利用這一特性我們可以做類似於：注冊 | 登陸 這種中間的間隔線
復制代碼代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>DEMO</title>
<style>
*{padding: 0;margin: 0;}
span {padding: 12px 4px 2px;margin-left: 8px;border-left:2px solid;font-size:0;}
</style>
</head>
<body>
注冊<span></span>登陸
</body>
</html>
效果圖
padding百分比值的特殊用法
從W3C標准中我們可以看到他是這麼描述的：規定基於父元素的寬度的百分比的內邊距。注意這裡是基於父元素的寬度。
對於移動端來說我們考慮響應式的時候可以做一個正方行或者固定比例的區域用於填充背景。
復制代碼代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>DEMO</title>
<style>
*{padding: 0;margin: 0;}
.test {width: 500px;margin: auto;}
.test div {padding: 50%;background: blue;}
</style>
</head>
<body>
<div class="test">
<div></div>
</div>
</body>
</html>
效果圖
padding繪制小圖標
復制代碼代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>DEMO</title>
<style>
*{padding: 0;margin: 0;}
.icon1 {width: 50px;height: 50px;border-radius: 50%;padding: 10px;border: 10px solid #000;background: #000;background-clip: content-box;float: left;}
.icon2 {width: 50px;height: 10px;padding: 10px 0;border-top: 10px solid #000;border-bottom: 10px solid #000;background: #000;background-clip: content-box;float: left;margin:20px 20px;}
</style>
</head>
<body>
<div class="icon1"></div>
<div class="icon2"></div>
</body>
</html>
效果圖
當然padding的用法肯定還有很多，像什麼三欄兩欄或者等比例自適應布局等等。這些都是大家常用的方法我就不單個列舉了。有興趣的同學可以去研究一下。希望這篇文章對大家的學習和工作能帶來一定的幫助。