[译]如何处理边距坍塌？

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 排版