我對margin外邊距合併的理解

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

       工做不久，通過幾個項目的洗禮，這個之前讓我迷惑的問題，終於有了深入的理解。

        我對其總結以下：

        1、當一個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去二者中最大值：

                           

 

2、當兩個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取最大值就行了。

       此爲做者拙見，歡迎廣大讀者批評和一塊兒交流。

 

 

QQ：2941120149會寫代碼的Husky

郵箱：it.fan@foxmail.com