深入CSS之外邊距折疊(margin collapse)詳解

ctriptech 發(fā)布于2019-08-30 15:53 / 2539人閱讀

摘要：發(fā)生外邊距折疊的條件是什么垂直方向上相鄰的兩個元素這種情況很好理解，就是上面的例子中給出的情況。外邊距折疊后的大小兩個相同大小的正數(shù)取某個外邊距的值。即與發(fā)生折疊，折疊后的值為。根據(jù)塊級格式化上下文來阻止外邊距折疊。

什么是外邊距折疊

準確來說，外邊距折疊應該叫垂直外邊距折疊，因為只會發(fā)生在垂直方向上，而水平方向上不會發(fā)生。

對于以下簡單的html代碼和css代碼，請問top塊和bottom塊之間的垂直間距是多少px?

.block {
  width: 100px;
  height: 100px;
  background-color: lightgray;
}
.top {
  margin-bottom: 20px;
}

.bottom {
  margin-top: 30px;
}

如果你不了解外邊距折疊，那么你會認為：
間距 = top塊的margin-bottom + bottom塊的margin-top
　　＝20px + 30px = 50px

然而實際情況是:

這就是（垂直）外邊距折疊。

外邊距折疊的定義：
The?top?and?bottom?margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as?margin collapsing. Note that the margins of?floating?and?absolutely positioned?elements never collapse.
翻譯過來就是：
塊級元素的上下外邊距(margin)在某些情況下會合并（折疊）起來，合并之后的大小為較大的margin。注意浮動和絕對定位的元素的margin從不折疊。

發(fā)生外邊距折疊的條件是什么

1.（垂直方向上）相鄰的兩個元素
這種情況很好理解，就是上面的例子中給出的情況。這里要注意一點，所謂相鄰指的是渲染之后的元素位置相鄰，而不是dom結(jié)構上的相鄰，也就是說如果將代碼：

改成

雖然加了一層div包裹，但是仍然會發(fā)生外邊距折疊。

2.父元素和第一個／最后一個子元素之間
考慮以下代碼：

.parent {
  margin-top: 30px;
}

.child {
  margin-top: 20px;
  width: 50px;
  height: 50px;
  background-color: lightgray;
}

parent塊有margin-top: 30px;child塊有margin-top: 20px;，那么第一個子元素距離最上面的距離是50px嗎？不是，由于有外邊距折疊的存在，折疊后的距離為30px。

外邊距折疊后的大小

1.兩個相同大小的正數(shù)：取某個外邊距的值。即30px與30px發(fā)生折疊，折疊后的值為30px。
2.兩個不同大小的正數(shù)：取較大的外邊距的值。即30px與20px發(fā)生折疊，折疊后的值為30px。
3.一正一負：取正數(shù)與負數(shù)的和。即30px與-20px發(fā)生折疊，折疊后的值為10px。
4.相同大小的負數(shù)：同相同大小正數(shù)。-30px與-30px折疊，折疊后為-30px。
5.不同大小負數(shù)：取絕對值較大的負數(shù)。-30px與-20px折疊，折疊后為-30px。

如果我希望不發(fā)生外邊距折疊，該怎么做

1.曲線救國，如果你希望垂直方向上兩個塊間距為50px，可以通過設置上方塊margin-bottom: 50px;而非采用30px + 20px;來實現(xiàn)。
2.根據(jù)BFC（block formatting context）塊級格式化上下文來阻止外邊距折疊。你可以試著將本文給出的第一個例子中的top塊設置：display: inline-block;來形成BFC。這樣就不會再發(fā)生外邊距折疊了。我在實驗中發(fā)現(xiàn)，在設置了display:inline-block之后，期望的間距為50px，但是實際情況如下：

發(fā)現(xiàn)竟然是54px，那么多出來的4px是哪來的？該如何處理掉多余的4px？這里先不做解釋，留個坑，在另一篇文章《inline-block產(chǎn)生的看不見的空間》里解釋。至于如何處理，只需要在container上加上font-size: 0;即可,就會得到我們想要的50px。

GPU云服務器云服務器外邊距重疊 html外邊距上下 html外邊距顏色 html 邊框外邊距

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116665.html

詳解css外邊距折疊（margin collapsing）

摘要：這個例子就是外邊距折疊塊級元素的上外邊距和下外邊距有時會合并或折疊為一個外邊距。外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現(xiàn)，分為3種情況，非常具有實用價值，需要的朋友可以參考下前文這是的一個經(jīng)典的老問題，因為之前剛好有讀者朋友問到，順便整理一下。從一個簡單例子說起先看一個簡單示例： `` `.sli...

孫吉亮 2019-08-23 13:52 評論0 收藏0
詳解css外邊距折疊（margin collapsing）

摘要：這個例子就是外邊距折疊塊級元素的上外邊距和下外邊距有時會合并或折疊為一個外邊距。外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現(xiàn)，分為3種情況，非常具有實用價值，需要的朋友可以參考下前文這是的一個經(jīng)典的老問題，因為之前剛好有讀者朋友問到，順便整理一下。從一個簡單例子說起先看一個簡單示例： `` `.sli...

J4ck_Chan 2019-06-28 16:52 評論0 收藏0
詳解css外邊距折疊（margin collapsing）

摘要：這個例子就是外邊距折疊塊級元素的上外邊距和下外邊距有時會合并或折疊為一個外邊距。外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現(xiàn)，分為3種情況，非常具有實用價值，需要的朋友可以參考下前文這是的一個經(jīng)典的老問題，因為之前剛好有讀者朋友問到，順便整理一下。從一個簡單例子說起先看一個簡單示例： `` `.sli...

levy9527 2019-08-29 17:28 評論0 收藏0
深入理解CSS外邊距折疊（Margin Collapse）

摘要：我們可以注意定義中的幾個關鍵字毗鄰兩個或多個垂直方向和普通流。如何避免外邊距疊加上面講了外邊距的疊加，那如何避免呢，其實只要破壞上面講到的四個條件中的任何一個即可毗鄰兩個或多個普通流和垂直方向。外邊距疊加一直是前端開發(fā)必須了解的一個概念，面試一般也會問到這個問題。所以整理一下相關外邊距疊加相關的知識點。外邊距疊加是什么？什么時候會發(fā)生外邊距疊加？如何避免外邊距疊加？什么是外邊距疊加...

zhonghanwen 2019-08-29 13:01 評論0 收藏0