外边距叠加

外边距叠加：

相邻兄弟元素：

#div1{width: 100px;height: 100px;background-color: red;margin-bottom: 60px;}  #div2{/*float:left;*/width: 100px;height: 100px;background-color: yellow;margin-top: 40px;}  

<div id="div1">div1</div>  <div id="div2">div2</div> 

父子元素：

body{border: solid red 2px;}#div1{width: 200px;height: 200px;background-color: red;margin-top: 60px;/*border: solid purple 2px;*/}  #div2{width: 100px;height: 100px;background-color: yellow;margin-top: 40px;}  

<div id="div1">    <div id="div2">内部</div>  </div>   

元素自身发生外边距叠加：

div{width: 200px;}  #div1{margin-top: 20px;margin-bottom: 20px;}  

<div style="border: red solid 1px;">    <div id="div1"></div></div><div style="height: 20px;background-color: yellow;">高度为20px的div</div>

下面的文字来源于http://www.cnblogs.com/ginowang42/archive/2012/02/25/2367573.html

浮动元素和其他任何元素之间不发生外边距叠加 (包括和它的子元素).
创建了BFC的元素不会和它的子元素发生外边距叠加
绝对定位元素和其他任何元素之间不发生外边距叠加(包括和它的子元素).
inline-block元素和其他任何元素之间不发生外边距叠加 (包括和它的子元素).
普通流中的块级元素的margin-bottom永远和它相邻的下一个块级元素的margin-top叠加（除非相邻的兄弟元素clear）
普通流中的块级元素（没有border-top、没有padding-top）的margin-top和它的第一个普通流中的子元素（没有clear）发生margin-top叠加
普通流中的块级元素（height为auto、min-height为0、没有border-bottom、没有padding-bottom）和它的最后一个普通流中的子元素（没有自身发生margin叠加或clear）发生margin-bottom叠加
如果一个元素的min-height为0、没有border、没有padding、高度为0或者auto、不包含子元素，那么它自身的外边距会发生叠加