前言

最近在學習很多開發過程中容易忽悠但是又很重要的知識點，很多時候用的少不代表它不重要，這裡將它們寫出來以記錄，如果有寫的不好的地方請指正。

概念

margin合併是指塊級元素的上外邊距與下外邊距有時會合併為單個外邊距，有兩點需要理解。
1. 在塊級元素中，不包括浮動和絕對定位元素
2. 只發生在和當前文件流方向的相垂直的方向上

場景

一、相鄰兄弟元素margin合併

p { margin: 1em 0; }
<p>第一行</p>
<p>第二行</p>

因為第一行和第二行的元素合併在一起，所以他們的間距還是1rem，而並非上下相加。

二、父級和子元素

.div1 { margin-top: 10px; }
.div2 { margin-top: 10px; }
<div class="div1">
  <div class="div2"></div>
</div>

由於父級和子級元素的合併，所以頂部的margin為10px，而不是20px。

三、空級塊元素的合併

div1 { overflow: hidden; }
div2 { margin: 1rem 0; }
<div class="div1">
  <div class="div2"></div
 
>
</div>

這個

解決方法

這裡的解決方法我們分為三種情況來討論，第一種就是解決兄弟元素之間的margin合併情況。
我們可以使用設定浮動元素來解決，例如：

p { 
  margin: 1em 0;
  float: left; 
}
<p>第一行</p>
<p>第二行</p>

第二種是父級和子元素之間的margin合併，我們使用overflow屬性來解決，例如：

.div1 { 
  margin-top: 10px;
  overflow: hidden; 
}
.div2 { margin-top: 10
 
px; }
<div class="div1">
  <div class="div2"></div>
</div>

當然，我們還可以通過設定父元素為塊狀格式化上下文元素、設定border、padding等方式來解決問題。
第三種情況就是空塊級元素的合併，一般為空塊級元素設定一個高度就能夠避免margin合併的問題。

div1 { overflow: hidden; }
div2 { 
  margin: 1rem 0;
  height: 1rem; 
}
<div class="div1">
  <div class="div2"></div>
</div>

意義

CSS中的margin合併是為了更好地進行圖文資訊展示而設計的，為了保證圖文資訊排版的舒服自然。我們不僅要理解它們存在的意義，而且要合理的運用它們。