margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。是允许负值的。
margin(padding):10px;
所有 4 个外边距都是 10px
margin(padding):10px 5px;
上外边距和下外边距是 10px
右外边距和左外边距是 5px
margin(padding):10px 5px 15px;
上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
margin(padding):10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px.
padding 简写属性在一个声明中设置所有内边距属性。这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
是不允许负值的。
边距属性定义元素周围的空间。通过使用单独的属性，可以对上、下、左、右的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。边界，元素周围生成额外的空白区。“空白区”
通常是指其它元素不能出现且父元素背景课件的区域。
一问题：什么时候用margin？什么时候用padding？
解决方法：margin是透明的，是用来个开元素语元素的间距；padding是用来填充元素与内容的间隔。margin在布局中用于分开元素是元素与元素的距离；padding用于元素与内容之间的填充
，在不固定高度布局中，padding用来撑起元素高度。
二问题：margin和padding有什么区别？
解决：比如一个盒子里有一个瓶子，瓶子与盒子之间的距离就称为padding，盒子与另一个盒子之间的距离就称为margin。
三问题：margin的重叠
解决：1、水平边距永远不会重合。
2、在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下：
a、全部都为正值，取最大者；
b、不全是正值，则都取绝对值，然后用正值减去最大值；
c、没有正值，则都取绝对值，然后用0减去最大值。
注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。
3、相邻的盒模型中，如果其中的一个是浮动的（float），垂直margin不会重叠，并且浮动的盒模型和它的子元素之间也是这样。
4、设置了overflow属性的元素和它的子元素之间的margin不被重叠（overflow取值为visible除外）。
5、设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，并且和他们的子元素之间也是一样。
6、设置了display:inline-block的元素，垂直margin不会重叠，甚至和他们的子元素之间也是一样。
7、如果一个盒模型的上下margin相邻，这时它的margin可能重叠覆盖（collapse through）它。在这种情况下，元素的位置（position）取决于它的相邻元素的margin是否重叠。.
网友评论