CSS外边距折叠

外边距折叠（Margin Collapse）是CSS的特性，相邻的垂直外边距会合并成一个。

发生条件

• 相邻块级元素之间
• 父子块级元素之间
• 空块级元素自身

相邻兄弟元素折叠

.box1 {
  margin-bottom: 30px;
}

.box2 {
  margin-top: 20px;
}

/* 实际间距 = max(30px, 20px) = 30px */

两个 margin 取较大值，不是相加。

父子元素折叠

.parent {
  background: #eee;
}

.child {
  margin-top: 30px;
}

/* 父元素随子元素一起"塌陷" */

父子 margin-top 或 margin-bottom 会发生折叠。

解决父子折叠

/* 方法1：父元素添加边框 */
.parent {
  border-top: 1px solid transparent;
}

/* 方法2：父元素添加 padding */
.parent {
  padding-top: 1px;
}

/* 方法3：创建 BFC */
.parent {
  overflow: hidden;
  /* 或 */
  display: flow-root;
}

/* 方法4：父元素设置 position */
.parent {
  position: absolute;
}

空元素自身折叠

.empty {
  margin-top: 30px;
  margin-bottom: 20px;
  /* 没有内容、边框、内边距 */
}

/* 实际占用高度 = max(30px, 20px) = 30px */

不发生折叠的情况

注意：外边距折叠只发生在垂直方向，水平方向不会折叠。

要点总结

• 垂直相邻 margin 取较大值合并
• 父子折叠可通过 BFC 或边框解决
• 水平方向 margin 不会折叠
• flex/grid 布局中不存在外边距折叠

存放路径：articles/CSS/入门/CSS盒模型/CSS外边距折叠.md