框模型之外邊距 margin 摺疊

2021-07-27 17:06:07 字數 3683 閱讀 2689

首先回顧一下margin的特性:

現在重點來看下外邊據摺疊的情況。

collapsing margins，即外邊距摺疊，指的是毗鄰的兩個或多個外邊距 (margin) 會合併成乙個外邊距。

其中所說的 margin 毗鄰，可以歸結為以下兩點：

下面詳細的介紹其規則。

「兩個或多個」

說明其數量必須是大於乙個，又說明，摺疊是元素與元素間相互的行為，不存在 a 和 b 摺疊，b 沒有和 a 摺疊的現象。

毗鄰

是指沒有被非空內容、padding、border 或 clear 分隔開，說明其位置關係。

在沒有被分隔開的情況下，乙個元素的 margin-top 會和它普通流中的第乙個子元素(非浮動元素等)的 margin-top 相鄰；

只有在乙個元素的 height 是 「auto」 的情況下，它的 margin-bottom

才會和它普通流中的最後乙個子元素(非浮動元素等)的 margin-bottom 相鄰。

例如：

style="border:1px solid red; width:100px;">


style="margin:50px 0; background-color:green; height:50px; width:50px;">


style="margin:20px 0;">


style="margin:100px 0;">bdiv>


div>


div>


div>
以上**中，margin 會把 b 的包含塊撐開。

如果乙個元素的 height 特性的值不是 auto，那麼它的 margin-bottom 和它子元素的 margin-bottom 不算相鄰，因此，不會發生摺疊。 margin-top 沒有此限制，所以是 100px，margin-bottom 沒有摺疊，只有 50px。

垂直方向

只有垂直方向的 margin 才會摺疊，水平方向的 margin 不會發生摺疊的現象。

參與摺疊的 margin 都是正值

style="height:50px; margin-bottom:50px; width:50px; background-color: red;">adiv>


style="height:50px; margin-top:100px; width:50px; background-color: green;">bdiv>
在 margin 都是正數的情況下，取其中 margin 較大的值為最終 margin 值。即上例中a,b之間的margin值是100px。

參與摺疊的 margin 都是負值

style="height:100px; margin-bottom:-75px; width:100px; background-color: red;">adiv>


style="height:100px; margin-top:-50px; margin-left:50px; width:100px; background-color: green;">bdiv>
當 margin 都是負值的時候，取的是其中絕對值較大的，然後，從 0 位置，負向位移,所以上例中a,b垂直方向上重疊75px。

參與摺疊的 margin 中有正值，有負值

如果，毗鄰的 margin 中有正值，同時存在負值會怎樣呢？有正有負，先取出負 margin 中絕對值中最大的，然後，和正 margin 值中最大的 margin 相加。

style="height:50px; margin-bottom:-50px; width:50px; background-color: red;">adiv>


style="height:50px; margin-top:100px; width:50px; background-color: green;">bdiv>
上面的例子最終的 margin 應該是 100 + (-50) = 50px。

複雜的層級元素

相鄰的 margin 要一起參與計算，不得分步計算。

要注意，相鄰的元素不一定非要是兄弟節點，父子節點也可以，即使不是兄弟父子節點也可以相鄰。

而且，在計算時，相鄰的 margin 要一起參與計算，不得分步計算。

style="margin:50px 0; background-color:green; width:50px;">


style="margin:-60px 0;">


style="margin:150px 0;">adiv>


div>


div>


style="margin:-100px 0; background-color:green; width:50px;">


style="margin:-120px 0;">


style="margin:200px 0;">bdiv>


div>


div>
錯誤的計算方式：算 a 和 b 之間的 margin，分別算 a 和其父元素的摺疊，然後與其父元素的父元素的摺疊，這個值算出來之後，應該是 90px。依此法算出 b 的為 80px；然後，a和b摺疊，margin 為 90px。

要注意的是，多個 margin 相鄰摺疊成乙個 margin，所以計算的時候，應該取所有相關的值一起計算，而不能分開分步來算。

根據有正有負時的計算規則，正值的最大值為 200px，負值中絕對值最大的是 -120px，所以，最終摺疊後的 margin 應該是 200 + (-120) = 80px。

浮動元素的 margin 在垂直方向上也不會發生 margin 摺疊，即使和它相鄰的子元素也不會。

style="margin-bottom:50px; width:50px; height:50px; background-color:green;">adiv>


style="margin-top:50px; width:100px; height:100px; background-color:green; float:left;">


style="margin-top:50px; background-color:gold;">bdiv>


div>
兩個綠色的塊兒之間，相距100px，而若 b 和它的浮動包含塊發生 margin 摺疊的話，金色的條應該位於綠色塊的最上方，顯然，沒有發生摺疊。

例如，設定」overflow : hidden」：

style="margin-top:50px; width:100px; height:100px; background-color:green; overflow:hidden;">


style="margin-top:50px; background-color:gold;">bdiv>


div>
元素自身的 margin-bottom 和 margin-top 相鄰時也會摺疊

自身 margin-bottom 和 margin-top 相鄰，只能是自身內容為空，垂直方向上 border、padding 為 0。

CSS框模型中關於外邊距 margin 摺疊的情況

最近做了個專案，居然在乙個小小的css問題上折騰了很久很是 糾結 外邊距摺疊的問題。今天難得清閒，就把這個問題研究了一下，才發現大有學問，所以寫篇博文整理一下，以便更加牢記！外邊距摺疊，指的是 毗鄰的兩個或多個外邊距 margin 在垂直方向會合併成乙個外邊距。觸發條件 毗鄰，沒有被非空內容 pad...

CSS之外邊距摺疊

collapsing margins，即外邊距摺疊，指的是毗鄰的兩個或多個外邊距 margin 會合併成乙個外邊距。其中所說的 margin 毗鄰，可以歸結為以下兩點 兩個或多個 說明其數量必須是大於乙個，又說明，摺疊是元素與元素間相互的行為，不存在 a 和 b 摺疊，b 沒有和 a 摺疊的現象。毗...

CSS盒子模型中外邊距（margin）摺疊詳解

最近寫專案過程中遇到乙個css盒子模型中外邊距 margin 摺疊的情況，搞得我焦頭爛額，之後再網上查閱了大量的資料，現做乙個整理和總結，方便以後忘記的時候查閱，同時也供廣大參考。如有錯誤或者總結方面不全的地方，歡飲廣大指出。外邊距摺疊的概念 所謂外邊距摺疊就是相鄰的兩個或多個元素 含有子元素的情況...