元素占用宽度 = 元素宽度+padding+border+margin

注意margin只是隔开元素，不会使得元素变大，而padding会使得元素变大，也就是说

元素真实宽度=元素宽度+padding+border

border 在元素的外层

一、关于Padding

1、设置对象四边的内边距。默认值是0。

2、如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

3、如果只提供一个，将作用于全部的四边。

4、如果提供两个，第一个作用于上、下，第二个作用于左、右。

5、如果提供三个，第一个作用于上，第二个作用于左、右，第三个作用于下。

6、内联对象要使用该属性，必须先设定对象的height或width属性(在样式表中将width和height写在padding前面即可)，或者设定position属性为absolute。不允许负值。

7、内边距留白处总是透明的，并且设置内边距会直接影响对象的大小。

提示：

（1）设置了padding属性就相当于增加了对象的大小。原宽270px，高175px，设置padding:30px 0 0
40px后对象的大小应该是宽为310px，高为205px，要想保持原大小就必须减去相应的宽高。所以，对象的宽是270-40=230px，高是
175-30=145px。

（2）padding是不具有继承性的。

（3）padding属性是可以分别设置的。padding-top、padding-right、padding-bottom、padding-left分别作用于上、右、下、左四边。语法和参数和padding的设置相同。

二、关于margin

（1）设置对象四边的外边距。默认值是0。

（2）如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

（3）如果只提供一个，将作用于全部的四边。

（4）如果提供两个，第一个作用于上、下，第二个作用于左、右。

（5）如果提供三个，第一个作用于上，第二个作用于左、右，第三个作用于下。

（6）内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。

（7）外边距总是透明的，并且设置外边距不会直接影响对象的大小，只是相对位置发生变化。

提示：

（1）margin属性不具有继承性。由于IE的双边距BUG会往往导致内联对象设置边距后与父对象左边的距离实际值不符，遇到这样的问题就加display:inline;，意思是把对象视作行级元素。

（2）设置内联对象的上下边距是不会出现双边距问题的。margin不具有继承性，内联对象设置左右边距时出现双倍边距完全是IE的BUG。

（3）margin属性是可以分别设置的。margin-top、margin-right、margin-bottom、margin-left分别作用于上、右、下、左四边。