理解邊界重疊的原因

有三個標準情況會行成邊界重疊：

同一層的相鄰

兩個相鄰的元素邊界就會發生重疊，除非後者有加上clear-fix。例子:

<style>
  p:nth-child(1){
    margin-bottom: 13px;
  }
  p:nth-child(2){
    margin-top: 87px;
  }
</style>

 <p>下邊界範圍會...</p>
 <p>...跟這個元素的上邊界範圍重疊。</p>

這個例子如果以為邊界會合併的的話，理所當然會猜測上下兩個元素會合成一個 100px 的邊界範圍。
但其實會發生重疊，只會挑選最大的範圍留下，所以這個例子的邊界範圍其實是 87px。

 

父元素與第一個/最後一個子元素

如果第一個子元素跟父元素的上邊界範圍 ( margin-top ) 貼在一起，也會發生邊界重疊的情況。除非父元素有設定邊框 ( border ) 、 內距 ( padding )、內容設定為 inline 或是有加上 clear-fix 這些會隔開子元素和父元素的屬性。
最後一個子元素也是，但是與父元素的下邊界範圍 ( margin-bottom ) 更容易被隔開，因為父元素可以設定這些屬性。舉例:

<style type="text/css">
    section    {
        margin-top: 13px;
        margin-bottom: 87px;
    }

    header {
        margin-top: 87px;
    }

    footer {
        margin-bottom: 13px;
    }
</style>

<section>
    <header>上邊界重疊是 87</header>
    <footer>下邊界重疊還是 87 不能再高了</footer>
</section>

空的元素

當同一個元素上邊界範圍可以直接貼到下邊界範圍時，也會發生邊界重疊。這種情況會發生在一個元素完全沒有設定邊框 ( border ) 、 內距 ( padding )、高度 ( height )​ 、最小高度 ( min-height ) 、最大高度 ( max-height )​ 、內容設定為 inline 或是加上 clear-fix 的時候。舉個例子:

<style>
  p {
    margin: 0px;
  }
  div {
    margin-top: 13px;
    margin-bottom: 87px;
  }
</style>

<p>下邊界範圍是 87</p>
<div></div>
<p>...上邊界範圍也是 87。</p>

上面這些情況是會同時發生的，那時邊界重疊的原因又更複雜了。

比較特別的是，當計算的時候某些邊界範圍是負數，邊界重疊的結果會取最大值和最小值相加。也就是說如果有 -13px, 8px, 100px 疊在一起，邊界範圍的計算就是 100px - 13px 的 87px。

以上這些內容都是發生在 Block-Level 的元素，設定 floating 和 absolutely positioned 的元素完全不用擔心邊界重疊的計算

標準文件

參考

• CSS Reference
• CSS Key Concepts: CSS syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values. Definitions of value syntax, shorthand properties and replaced elements.