原文地址： https://my.oschina.net/huskydog/blog/749629

在我初學css的時候，關於css盒模型的外邊距合併問題，迷惑了我很久。在寫demo的時候，我只是儘量避免兩個div外邊距合併，怕出現各種各樣匪夷所思的bug。

       工作不久，經過幾個專案的洗禮，這個以前讓我迷惑的問題，終於有了深刻的理解。

        我對其總結如下：

        一、當一個div在另一個div裡，兩個div都有margin的屬性，想讓這兩個div不出現外邊距合併的問題，必須給外層div新增border屬性或者overflow:hidden屬性；如果允許其出現外邊距合併，內層div始終保持原位置，而外層div的margin屬性會取兩者的最大值。

        例： 1.不允許出現外邊距合併，給外層div新增overflow:hidden或border屬性：外層盒子margin-top為100px,內層盒子為50px。

2.允許出現外邊距合併：內層div始終保持原位置不變，外層div的margin去兩者中最大值：

二、當兩個div不存在巢狀關係時，不管是否有border或者overflow屬性時，兩者始終會存在外邊距合併問題。

例：1.第一個div有margin-bottom:100px，第二個為margin-top:50px, 兩者間距最終取100px

        2.第一個div 由margin-bottom:100px, 第二個為margin-top:150px,兩者間距最終取150px

        總結：在實際專案中，如果對外邊距合併理解不透徹而又不想因為css盒模型的外邊距合併問題困擾，可以在不影響佈局的問題下，可以新增overflow:hidden屬性或者跟透明的border；如無法避免外邊距合併問題，謹記兩者margin取最大值就好了。