前提：子元素要是塊級元素；

———————————————————————————————————

相信很多前端同學在做頁面開發的時候都遇到過這樣的問題。給一個div內部的div設定一個margin-top，結果它的父級跟著它一起下移了。如下面的程式碼

    .a {         width:100px;         height:100px;     }     .b {         width:50px;         height:50px;         margin-top:10px;     }           <div class="a">         <div class="b"></div>     </div>

效果是這樣的

但是其實我們期望的效果是這樣的

為什麼會產生這樣的效果呢？這要談到css的盒模型margin的合併問題

css在盒模型中規定

    In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗鄰的兩個或更多盒元素的margin將會合併為一個margin共享之。毗鄰的定義為：同級或者巢狀的盒元素，並且它們之間沒有非空內容、Padding或Border分隔。

其實很多小夥伴都知道css有這樣一個規定。只是我們只關注了相鄰div之間的margin合併而沒有考慮父級和子集的合併。我們一定要注意，巢狀也屬於毗鄰的喲。

那麼怎麼解決這個問題呢？這裡提供這樣幾種方法：

    讓父級具有“包裹性”     將父級over-flow設為hidden     將父級display設為inline-block     將父級float或absolute     改變父級的結構     給父元素設定padding     給父元素設定透明border

另一種解釋：

          這個問題發生的原因是根據規範，一個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會  和其內部文件流中的第一個子元素的上邊距重疊。

       再說白點就是：父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自    己“領導”(父元素，祖先元素)的麻煩。只要給領導設定個有效的 border或者padding就可以有效的管制這個目無領導的  margin 它越級，假傳聖旨，把自己的margin當領導的margin執行。 --------------------- 作者：學後臺做前端 來源：CSDN 原文：https://blog.csdn.net/hahhahahaa/article/details/80676873 版權宣告：本文為博主原創文章，轉載請附上博文連結！