当两个相邻的普通元素设置margin时，则它们的间距并不是简单的外边距相加。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin的重叠现象</title> </head> <style> #div1{ height: 100px; margin-bottom:50px; background: blue; } #div2{ height: 100px; margin-top: 50px; background: green; } </style> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>
效果如下：
两个div的高度是100px，明显间距不是50px＋50px
原因是当两个相邻普通元素设置margin时，实际它们之间的外边距满足其中设置外边距较大的一方。当然同时肯定满足设置外边距较小的一方。
这种重叠现象不值发生在兄弟元素之间，父子元素也会发生重叠现象。