盒子模型（Box Model）是CSS里一个重要的概念，大部分网页内容实际是通过盒子来呈现的，盒子模型由任意一个块级元素均由content(内容), padding, background(包括背景颜色和图片), border(边框), margin五个部分组成，其中padding和margin在IE 盒子模型和标准 W3C 盒子模型解析有所不同，容易混淆，平时用的多，但是没有详细了解有什么不同。先看一下盒子模型的立体图：
平面图，IE 盒子模型和标准 W3C 盒子模型解析的不同之处
以上两图可以给我们非常直观的认识，IE比较贪心，宽高把boder和padding都算进去了，标准就非常保守了。
接下来理解一下padding和margin属性，它们都有top、right、bottom、left，属性写法相同，上下左右均不同简写方式的顺序如下图
如果上下、左右相同的可以简写为padding：40px 20px；40px表示上下，20px表示左右；如果上下左右均一致，可以直接简写为padding：10px；在实际的使用过程中，我们会发现有时候在使用margin实现分割的时候达不到想要的效果，原因是产生了margin折叠，所以采用padding或boder较为保险。
margins折叠现象只存在于临近或有从属关系的元素, 垂直方向的margin中。产生margins折叠现象常常是因为父元素的高度无法预知或者没有设置高度，父元素的高度被默认设置为auto，即是子元素的padding-top到padding-bottom的距离，有平面图我们可以知道margin是在padding外的，所以子元素margin便超出到了父元素之外，此时总体效果margin的距离就看父子两元素谁margin得多了。在水平方向不会产生折叠。解决折叠我们可以是用padding-top/bottom或者boder-top/bottom来代替。
新建一个网页，body中间加入
margin折叠示例
添加样式
* {
padding:0;
margin:0;
}
#id1 {
background-color: #9C3;
color: #FFF;
margin-top: 10px;
margin-bottom: 10px;
}
#id2 {
margin-top: 30px;
margin-bottom: 30px;
border: 1px solid #030;
}
我们看到效果如下
1. 实际效果图，margin的距离是30px，id1的10px被折叠了。
2. firebug展开到id1的上时的效果，我们看到有约10px的margin，
3. firebug展开到id2的上时的效果，我们看到有约30px的margin，与1效果相同，可以清楚看到id1的10px被折叠了
4. margin改为padding之后的效果。
终于写完！