CSS中margin和padding属性的区别

Box Model ：任意一个块级元素均由content(内容)、 padding、background(包括背景颜色和图片)、border(边框)、margin五个部分组成， 立体图见附件

以下说明margin和padding属性：

1. Margin：包括margin-top, margin-right, margin-bottom, margin-left,，控制块级元素之间的距离， 它们是透明不可见的，margin值均为40px，代码为:

margin-top: 40px;
margin-right: 40px;
margin-bottom: 40px;
margin-left: 40px;

根据上、右、下、左的顺时针规则，简写为

margin: 40px 40px 40px 40px;

当上下，左右margin值分别一致，可简写为:

margin: 40px 40px;

前一个40px代表上下margin值，后一个40px代表左右margin值. 

当上下左右margin值均一致，可简写为:

margin: 40px;
 
2. Padding：包括padding-top、padding-right、padding-bottom、padding-left，控制块级元素内部，content与border之间的距离，其代码简写请参考margin属性的写法.

至此, 我们已经基本了解margin和padding属性的基本用法。 但是，在实际应用中，却总是发生一些让你琢磨不透的事, 而它们又或多或少的与margin有关. 

注：当你想让两个元素的content在垂直方向(vertically)分隔时, 既可以选择padding-top/bottom, 也可以选择margin-top/bottom, 建议尽量使用padding-top/bottom来达到你的目的，这是因为css中存在Collapsing margins（折叠的margins）的现象。
 
Collapsing margins：margins折叠现象只存在于临近或有从属关系的元素，垂直方向的margin中。