padding是盒子内容与边框的距离。
padding:10px;/*上下左右都是10px*/ padding:10px 20px;/*上下是10px 左右是20px*/ padding:10px 20px 30px 40px;/*依次是上下左右*/
注释：在盒子加上padding之后，例如padding:10px，会造成盒子宽高实际上都增加了10px。
嵌套中的盒子也就是子盒子，如果继承了父盒子的宽，那么不管子盒子如何增加padding-left、padding-right的值都不会撑大自己的宽，高是可以被撑大的。如果子盒子并没有继承父盒子的宽，而是自己设定了一个值，那么随着padding值的增大，它也会不断的增加。下面是继承了父盒子的宽：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.father {
500px;
height: 300px;
background-color:#b6ff00;
}
.son {
height: 100px;
background-color: red;
padding-left:20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
效果：
结果：并没有撑大它的宽。
