雖然之前有遇過，但一直沒有詳細的去看過，在一些情況之中，會發現元素的 margin 沒有完全的體現出來。想像兩個 <p> 元素，第一個有 margin-bottom: 10px;，第二個有 margin-top: 20px;，最後顯示出來兩個 <p> 之間並不會是相加的 30px，而是取較大數值的 20px。
這種情況稱為「邊界重疊」(margin collapsing)。
以下幾種情況會造成此狀況：
- 同一層級的相鄰兩個元素
- 父元素與其下的第一個 / 最後一個子元素
- 空元素 (元素的上下邊界可以碰在一起)
其餘附加條件：
- Block-Level 的元素才會發生邊界重疊
- 設定 floating 和 absolutely positioned 的元素不會發生邊界重疊
- 當計算的時候某些邊界範圍是負數，邊界重疊的結果會取最大值和最小值相加。也就是說如果有 -13px, 8px, 100px 疊在一起，邊界範圍的計算就是 100px – 13px 的 87px。
參考：