[譯]如何處理邊距坍塌？

margin collapsing 會被翻譯爲邊界坍塌，邊界崩塌，外邊距重疊，邊界摺疊，邊距重合...。 邊距坍塌是表象，外邊距重疊從理論上描述着這種現象發生的緣由，坍塌是由於重疊了。

• What's the Deal with Collapsible Margins?
• MDN-外邊距重疊

css盒子模型

在咱們探討外邊距坍塌如何工做以前，咱們須要從新研究盒子模型，文檔樹中的每一個元素都是一個矩形框，由四個區域組成：內容區（content area），填充區域（padding area），邊框區域（border area）和邊距區域（margin area）。

外邊距區域是元素邊框外面的空白，咱們看下.box元素示例：

.box {
 width: 300px;  height: 300px;  padding: 50px;  border: 50px solid grey;  margin: 50px; /* margin area */ } 複製代碼

下圖條紋區域爲外邊距區域的空白，以下所示：

外邊距區域與盒模型的其餘三個區域不一樣，由於在技術上它不是元素自己的一部分。即便咱們在CSS中爲元素指定設置了外邊距（margin）,在文檔上繪製的實際邊界也會受到文檔中其餘元素的影響，就像咱們在外邊距重疊看到的狀況同樣。

什麼是外邊距重疊？

當兩個塊元素在垂直方向相鄰時，將2個邊距的較大者(或相等的任意一個)假定爲單個摺疊邊距。

咱們有2個元素，元素A爲下邊距爲10px，元素B的上邊距爲30px,分開展現效果以下：

若是咱們把2個元素垂直方向依次放置這2個塊元素，結果以下：

元素A和元素B的外邊距會合併到一塊兒，保留了30px的外邊距。

何時會外邊距重疊

廣泛的規則是：正常文檔流中2個塊級元素的垂直外邊距始終會重疊，有如下四種狀況：

狀況1：父元素和其第一個子元素的上邊距

父元素上邊距和第一個子元素的上邊距會發生重疊。

.parent {
 margin-top: 30px;  height: 150px;  background-color: rgb(200,200,200); /* Grey */ }  .child {  margin-top: 30px;  width: 100px;  height: 100px;  background-color: rgb(250, 219, 92); /* Yellow */ } 複製代碼

狀況2：父元素和其最後一個子元素的下外邊距

和上一個示例相似，若是父元素和子元素的最後一個都存在下外邊距（margin-bottom）,下外邊距可能會重疊。可是，與上外邊距不一樣，僅在父元素的高度是auto時，下邊距纔有重疊。

.parent {
 margin-bottom: 30px;  height: auto;  background-color: rgb(200,200,200); }  .child {  margin-bottom: 30px;  width: 100px;  height: 100px;  background-color: rgb(250, 219, 92); } 複製代碼

狀況3：相鄰塊元素的垂直外邊距

有2個元素，元素A有底邊外邊距，元素B流入元素B底部，則這2個塊元素可能會垂直外邊距重疊。

.sibling-one {
 margin-bottom: 10px;  width: 100px;  height: 100px;  background-color: rgb(250, 219, 92); }  .sibling-two {  margin-top: 30px;  width: 100px;  height: 100px;  background-color: rgb(200,200,200); } 複製代碼

狀況4：空元素

最後一種狀況，若是這個元素的計算高度是0或者是一個空元素，元素的上外邊距（margin-top）和其下外邊距（margin-bottom）可能會重疊，即元素自身垂直外邊距重疊。

<p>This paragraph is before the empty element</p>
<div class="empty"><!-- 空元素 --></div> <p>This paragraph is after the empty element</p> 複製代碼

例外

有一些例外狀況，垂直外邊距不會重疊，咱們須要瞭解這些例外狀況。

Flexbox，Grid和其餘非塊級元素

外邊距重疊只適用於塊級元素，若是塊元素的display屬性設置爲如下任一值

• block
• list-item
• table

所以，彈性項目（flex items），網格項目（grid items），絕對定位項目（absuolute,fixed）和其非塊級元素不適用。

根元素

能夠理解爲body永遠不會和子元素的垂直外邊距重疊。

線框，間隙，填充，和邊框

• 間隙：父子元素，兄弟元素之間有元素把他們隔離開。
• 填充：父子元素父元素設置padding。
• 邊框：元素有一個設置了邊框。

存在以上狀況，則不會發生父子兄弟元素垂直外邊距重疊。

如狀況1示例，父元素的上邊距和子元素的上邊距重疊，咱們給父元素設置邊框則外邊距不會重疊。

發生這種狀況是由於父元素的邊緣再也不與子元素的邊緣直接接觸

處理外邊距重疊

若是您不正確地瞭解可摺疊邊距的發生時間，則可能會很痛苦。 處理或避免它們的第一步是準確瞭解咱們正在處理哪一種狀況的可摺疊邊距。

真正沒法避免因爲元素爲空或父子關係而致使的邊距重疊。 抵消這種可摺疊邊距的惟一方法是在元素之間插入一些東西，例如邊框。 不然，能夠將元素的顯示狀態更改成非塊級。

另外一方面，能夠經過更改CSS書寫樣式來避免因爲相鄰的同級元素而致使的邊距崩潰。 目前比較推崇的是哈里·羅伯茨（Harry Roberts）的Single-direction margin declarations單向保證金聲明規則，該規則除了有助於避免可摺疊的保證金以外，還有其餘好處。

Single-direction margin declarations單向保證金聲明規則： 其實就是避免給塊元素同時設置上下外邊距，使用單向原則，垂直方向只設置一個方向的外邊距（margin-bottom）

• 能輕鬆定義垂直方向的元素
• 若是邊距都使用一個規則 margin-bottom，若是我添加，移動或刪除一個元素，個人間距不會弄亂。
• 若是組件和元素的邊距不取決於相鄰的元素，則它們不必定必須按必定的順序存在。

本文使用 mdnice 排版