某些相邻的margin会发生合并，我们称之为margin折叠
来看例子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 h2{margin:10px 0;background-color: #0f0;} 7 div{margin:20px 0;background-color: #00f;height: 50px;border:1px solid #aaa;} 8 </style> 9 </head> 10 <body> 11 <!-- 情景一 --> 12 <h2>这是一个标题</h2> 13 <div> 14 <h2>这是又一个标题</h2> 15 </div> 16 <!-- 本例中，第一个h2的margin-bottom（10px），div的margin-top（20px），第二个h2的margin-top（10px）将被合并，它们之间的margin间隙最后是（20px），即取三者之间最大的那个值。 --> 17 18 <!-- 情景二 --> 19 <h2>这是一个标题</h2> 20 <div> 21 <h2>这是又一个标题</h2> 22 </div> 23 <!-- 本例中，第一个h2的margin-bottom（10px），div的margin-top（20px）将被合并，但第二个h2的margin-top不与它们合并，因为它被border分隔，不与它们相邻。 --> 24 </body> 25 </html>
显示效果：
margin折叠常规认知：
margin折叠只发生在块级元素上；
浮动元素的margin不与任何margin发生折叠；
设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠；
绝对定位元素的margin不与任何margin发生折叠；
根元素的margin不与其它任何margin发生折叠；
原文：http://www.cnblogs.com/canghaigg/p/5790496.html