<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .div{ /* overflow: hidden;*//*利用該屬性或者通過給父級元素設置border可以避免出現父級元素的margin合並的情況，當沒有設置這兩個屬性之一時，該div的margin-top值會取div1的margin-top和其自身margin-top的最大值*/ /* border:1px solid red;*/ margin:0 auto; margin-top:10px; width:300px; background: #aaa; } .div1{ width:200px; height:200px; background: red; margin:20px 0px; } .div2{ width:200px; background: green; margin: 10px 0px; height:200px; } </style> </head> <body> <div class="div"> <div class="div1"></div> <div class="div2"></div> </div> </body> </html>
一、在div里面有子元素div1時，div在沒有設置overflow：hidden或者是border屬性時，div的margin-top的值為div/div1中的margin-top的最大值。上面的結果如圖：
注意：div1在div中的margin-top值為0px;
二、當父級div設置了上述屬性中的一個時（如overflow：hidden），結果如下圖所示：
div的margin-top值為其自身設置的值10px，同時div1的margin-top值也是正常的20px
三、當元素是兄弟元素時，在不設置float和position:absolute時margin-bottom和margin-top會自動的合並為兩者中的最大值。如上面的div1和div2兩者之間的margin距離為20px;當兩者同時設置了float：Left時，兩者之間的margin值是30px,如圖所示：
設置float前： 設置float后
