前言

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

概念

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>

這個<div>元素的margin-top和margin-bottom合并在一起，所以高度只有1rem。

解決方法

這里的解決方法我們分為三種情況來討論，第一種就是解決兄弟元素之間的margin合并情況。
 

我們可以使用設置浮動元素來解決，例如：

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

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

.div1 {   margin-top: 10px;  overflow: hidden; }.div2 { margin-top: 10px; }<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合并是為了更好地進行圖文信息展示而設計的，為了保證圖文信息排版的舒服自然。我們不僅要理解它們存在的意義，而且要合理的運用它們。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。