淺析 CSS 中的邊距重疊

邊距重疊是什麼

在說邊距重疊之前，先以正常的思維來考慮如果你現在是浏覽器引擎遇到這種情況應該怎麼辦？

現在有兩個元素 div1 和 div2 上下緊挨着，中間沒有其它元素，它們的外邊距就會發生重疊。div1 在上，div2 在下，div1 的 margin-bottom 為 20px， div2 的 margin-top 為 30px，那兩個元素應該距離多少呢？

50px 嗎？應該不是的，如果是 50px，那麼 div1 的 margin-bottom 設定的沒起作用，距離下邊的元素并不是 20px， div2 元素的 margin-top 也沒有起作用。

如果至少要讓一個起作用，那應該要讓數值大的 margin 起作用，因為如果讓 margin 小的起作用有可能會影響顯示。

是以當兩個上下相鄰的外邊距重合時，取較大的 margin。

.top {
  width: 200px;
  height: 100px;
  margin-bottom: 20px;
  background-color: red;
}
.bottom {
  width: 200px;
  height: 100px;
  margin-top: 30px; /* 較大的 margin */
  background-color: blue;
}

上面說完了相鄰元素的邊距重疊，還有一種就是父子元素之間的邊距重疊。

首先說明一下什麼情況下父子元素之間會發生邊距重疊，現在考慮父元素中包含一個子元素的情況，當子元素設定了 margin，父元素的 border，padding 為 0 的情況下才會發生邊距重疊，如果父元素的 border 或 padding 不為 0，那麼子元素外邊距和父元素的外邊距之間會隔着父元素的 border 或 padding，這樣父子元素的 margin 就不會在一起了，也就不會發生邊距重疊了。

下面結合圖說明可能出現的幾種情況：

情況一: 父元素: margin: 0, 子元素： margin-top： 60px; 我們的本意是子元素距離父元素的頂部 60px，父元素距離其它元素的 margin 為 0。可是我們可以看到父元素距離頂部有一段間距，這就是子元素設定的 margin-top，父子元素的 margin 發生了重疊，這和我們本意并不相符。

<section id = \'sec\'>
  <style media="screen">
    #sec {
  background: yellowgreen;
}
  .child {
    height: 100px;
    margin-top: 60px;
    background: pink;
  }
</style>
<article class=\'child\'>
  </article>
</section>

子元素

父元素

情況二：父元素: margin-top: 100px, 子元素： margin-top： 60px; 通過下面的結果可以看到，父元素距離外部元素的 margin-top 是 100px，驗證了邊距重疊時，會取較大的 margin 值。

<section id = \'sec\'>
  <style media="screen">
    #sec {
      background: yellowgreen;
      margin-top: 100px;
    }
    .child {
      height: 100px;
      margin-top: 60px;
      background: pink;
    }
  </style>
  <article class=\'child\'>
  </article>
</section>

父元素

子元素

平常我們經常見到的外邊距塌陷一般指的是下面這種情況。

父子元素的上方有一個元素，這個時候又會發生邊距重疊，并且當這個元素的 margin-bottom 的值要大于等于父子元素邊距重疊後最終取得的 margin-top 的值時，父子元素的 margin-top 就不起作用了，這就是外邊距塌陷。

使用 MDN 上的外邊距塌陷的例子吧。

.blue 元素的 margin-bottom 是 12px， .red-inner 元素的 margin-top 也為 10px。這個時候，如圖所示，.blue 元素和 .red-outer 元素之間的 margin 為 12px，.red-inner 元素的 margin-top 并沒有起作用，發生了外邊距塌陷。

<section id = \'sec\'>
    <style>
      .blue {
        height: 50px;
        margin-bottom: 12px;
        background: blue;
      }
  
      .red-outer {
        background: red;
      }

      .red-inner {
        height: 50px;
        margin-top: 10px;
      }
    </style>
    <div class="blue">blue</div>
    <div class="red-outer">
      <div class="red-inner">red inner</div>
    </div>
  </section>

如何解決邊距重疊

就上面外邊距塌陷的例子而言，本質問題在于子元素沒有按照我們的本意距離父元素的頂部 10px，而是與父元素發生了邊距重疊。

在最開始的時候我們分析過導緻父子元素邊距重疊的根本原因就是父元素的 border， padding 為 0，導緻父子元素的外邊距挨在一起，是以發生了邊距重疊。

那麼給父元素的 border或者 padding 一個值即可解決父子元素邊距重疊的問題。

但是無緣無故給父元素一個 border 或 padding 值似乎不太合适，是以一般我們不采用這種方法，而是觸發父元素的 BFC。

接下來就詳細地講一下 BFC 到底是什麼，BFC 究竟是個什麼神奇的東西呢，為什麼父元素觸發了 BFC 就可以解決邊距重疊了，為什麼父元素觸發了 BFC 就可以清除浮動了呢？

關于 BFC 我們在下一篇文章 CSS 中你應該了解的 BFC 中一探究竟。