1.背景介绍

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 简写属性在一个声明中设置所有内边距属性。这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。 是不允许负值的。

2.知识剖析

边距属性定义元素周围的空间。通过使用单独的属性，可以对上、下、左、右的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。边界，元素周围生成额外的空白区。“空白区” 通常是指其它元素不能出现且父元素背景课件的区域。

3.常见问题

什么时候用margin？什么时候用padding？

4.解决方案

margin是透明的，是用来个开元素语元素的间距；padding是用来填充元素与内容的间隔。margin在布局中用于分开元素是元素与元素的距离；padding用于元素与内容之间的填充 ，在不固定高度布局中，padding用来撑起元素高度。

5.编码实战

6.扩展思考

margin和padding有什么区别？

比如一个盒子里有一个瓶子，瓶子与盒子之间的距离就称为padding，盒子与另一个盒子之间的距离就称为margin。

7.参考文献

8.更多讨论