外边距塌陷是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 更稳定可靠。
