使用 border 或 padding 阻断合并，如 border: 1px solid transparent 或 padding: 0.1px；2. 改用 flex、grid 或 inline-block 布局，避免子元素垂直 margin 合并；3. 创建 BFC 隔离，通过 overflow: hidden 或 display: flow-root；4. 统一使用单侧 margin，推荐仅设 margin-bottom。现代项目建议采用 display: flow-root 或 Flexbox 从根本上避免问题。
当两个垂直方向的 margin 相遇时，它们会合并成一个单一的 margin，这个现象叫做margin 合并（Margin Collapse）。这在块级元素中很常见，尤其是在使用 display: block 的元素之间。虽然这是 CSS 的标准行为，但有时会导致布局上的意外效果。以下是几种常见的处理方式。
1. 使用 padding 或 border 阻断合并
margin 合并只发生在相邻的、没有间隔的外边距之间。如果元素之间有 border、padding 或 inline 元素，就不会发生合并。
• 给父元素添加border: 1px solid transparent• 或者设置
padding: 0.1px（极小值不影响视觉）
2. 改用 flex、grid 或 inline-block 布局
Flexbox 和 Grid 容器内的子元素不会发生垂直 margin 合并。将父容器设为 display: flex 可自然避免这个问题。
display: flex; flex-direction: column;•
display: inline-block 元素之间也不会合并 margin
3. BFC（块格式化上下文）隔离 margin
创建一个独立的 BFC 可以阻止 margin 向外合并。可以通过以下方式触发 BFC：
立即学习“前端免费学习笔记（深入）”；
•overflow: hidden•
overflow: auto•
display: flow-root（推荐，无副作用）
4. 统一使用单侧 margin
避免上下同时设置 margin。例如，只给元素设置 margin-top 或 margin-bottom，而不是两者都设。
margin-bottom 控制间距• 这样能减少合并场景，也更易于维护
基本上就这些方法。选择哪种取决于你的布局结构。如果是现代项目，推荐使用 display: flow-root 或 Flexbox 来从根本上规避问题。不复杂但容易忽略。
