理解邊界重疊的原因

翻譯不完整。請協助 翻譯此英文文件

當一個 Block 的 下邊界範圍 ( margin-bottom ) 和一個 Block 的 上邊界範圍 ( margin-top ) 都有設定時只會留下最大那個,這種情況我們稱為邊界重疊 ( margin collapsing )。

 

邊界會重疊有三個標準的情況: 

同一層的相鄰
兩個相鄰的元素邊界就會發生重疊,除非後者有加上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 的元素完全不用擔心邊界重疊的計算

標準文件

Specification Status Comment
CSS Level 2 (Revision 1)
The definition of 'margin collapsing' in that specification.
Recommendation Initial definition

參考

文件標籤與貢獻者

 此頁面的貢獻者: jackblackevo, MOSapeizer
 最近更新: MOSapeizer,