padding margin border 和元素大小

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

转载于:https://www.cnblogs.com/lbnnbs/p/4781876.html