外边距合并问题及解决方法

从现在开始，我们要努力学习啦！今天我给大家带来《CSS盒模型外边距合并解决方法》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

margin collapsing 是相邻块级元素垂直外边距合并为较大值的现象；可通过 display: flow-root 等方式阻止，但应先确认是否需打破该规范行为。

什么是 margin collapsing？

相邻块级元素的垂直 margin 会合并成一个，取两者中较大的值，而不是相加。这常导致布局“塌陷”——比如两个

元素之间只显示 20px 间距，而非预期的 40px（假设各设 margin-bottom: 20px 和 margin-top: 20px）。

如何阻止父子元素间的 margin collapsing？

父元素没边框、内边距或内容分隔时，子元素的上/下 margin 会“穿透”到父元素外边距，造成父容器高度塌陷或位置偏移。

• 给父元素加 border: 1px solid transparent（最轻量，无视觉影响）
• 或设 padding: 0.01px（避免触发 BFC 的同时规避渲染异常）
• 或启用 BFC：用 overflow: hidden、display: flow-root（推荐，语义清晰且无副作用）

div.container {
  display: flow-root; /* 阻断子元素 margin 向上“溢出” */
}

兄弟元素间 margin collapsing 怎么处理？

连续的块级兄弟元素（如多个