17370845950

外边距塌陷是CSS规范定义的行为，指相邻或父子块级元素的垂直margin合并而非叠加；可通过触发BFC（如overflow:hidden、display:flow-root）、用padding替代margin、统一设置单边margin或使用gap等方式避免。

当两个垂直方向的块级元素各自设置了 margin-top 和 margin-bottom，浏览器会把它们“合并”成一个 margin，而不是叠加——这叫 外边距塌陷（Margin Collapse）。常见于父子元素之间或相邻兄弟元素之间，导致实际间距小于预期。

用 overflow 触发 BFC 阻止塌陷

给父容器设置 overflow: hidden、auto 或 scroll，可使其成为 BFC（块级格式化上下文），从而隔离内部子元素的 margin，避免与父元素或相邻元素发生塌陷。

• 适合用于父子塌陷：比如子元素的 margin-top “顶穿”了父容器上边框
• 不改变布局尺寸，副作用小；但注意若内容溢出，hidden 会裁剪，auto 可能出现滚动条
• 其他触发 BFC 的方式也有效，如 display: flow-root（更现代、推荐）、float: left、position: absolute

用 padding 替代 margin 控制间距

如果塌陷发生在父子之间（如子元素设了 margin-top 却撑不开父容器），直接把这部分距离挪到父元素上：用 padding-top 代替子元素的 margin-top。

• padding 不会塌陷，且能真实撑开父容器高度/宽度
• 适用于固定结构，比如卡片头部、标题区域与内容之间的空隙
• 需同步调整子元素 margin（例如去掉 margin-top），否则可能造成双倍间距

相邻兄弟元素塌陷的处理技巧

两个同级 div 分别设了 margin-bottom 和 margin-top，结果只显示较大的那个值。这时可选：

• 只给其中一个设 margin（如统一用 margin-bottom），简单直接
• 用 gap 替代（在 Flex 或 Grid 容器中），完全规避 margin 塌陷问题
• 加一层 wrapper 并设 display: flow-root，让兄弟元素处于不同 BFC 中（较少用，略重）

基本上就这些。塌陷不是 bug，是 CSS 规范定义的行为；理解它，再用 overflow、padding 或 display 等方式合理绕过，比强行 hack 更稳定可靠。