元素占用宽度 = 元素宽度+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分别作用于上、右、下、左四边。