理解邊界重疊的原因

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

同一層的相鄰

兩個相鄰的元素邊界就會發生重疊，除非後者有加上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.