外边距折叠指垂直外边距合并现象，可通过添加padding/border、创建bfc（如overflow:hidden）、统一使用单侧margin、采用flex/grid布局等方式解决。
当两个垂直方向的外边距相遇时，它们不会简单相加，而是合并成一个更大的外边距，这种现象称为外边距折叠（margin collapsing）。它常出现在相邻块级元素、父元素与子元素之间，容易导致布局间距不符合预期。下面介绍几种实用方法来避免或解决这个问题。
使用 padding 或 border 替代 margin
外边距折叠只发生在 margin 之间，如果改用 padding 或添加不可见的 border，就能有效隔离外边距。
例如：- 给父元素设置
padding: 1px，再调整内部结构 - 添加
border: 1px solid transparent来阻止与子元素的 margin 折叠
为元素创建新的 BFC（块级格式化上下文）
BFC 内部的元素与外部的 margin 不会折叠。将元素变成独立的 BFC 容器，是推荐的解决方案之一。
常用方式包括：- 设置
overflow: hidden - 使用
display: flow-root（现代且语义清晰） - 设置
float: left或position: absolute
比如：给父元素加上 overflow: hidden，即可防止它和第一个/最后一个子元素发生 margin 折叠。
立即学习“前端免费学习笔记（深入）”；
统一使用单侧 margin
避免上下同时设置 margin。只在元素的顶部或底部设定外边距，可减少折叠机会。
建议做法：- 所有块级元素只使用
margin-bottom - 保持间距方向一致，便于控制和维护
使用 flex、grid 等布局容器
Flexbox 和 Grid 容器中的子元素不会与其兄弟或父元素发生外边距折叠。
示例：- 把一组段落放在
display: flex; flex-direction: column的容器中 - 使用
gap属性控制间距更直观安全
基本上就这些。选择哪种方式取决于具体场景。日常开发中，合理使用 BFC 或切换到现代布局方式，能从根本上规避 margin 折叠带来的困扰。
