非块级元素、脱离文档流元素、flex/grid子项、不同bfc中的元素之间根本不会发生margin合并，因不满足合并前提而天然免疫。
哪些元素之间根本不会发生 margin 合并
外边距合并（Margin Collapse）不是“所有 margin 都会叠”，它有严格的排除条件。只要不满足任一前提，合并就自动失效——这不是“修复”，而是天然免疫。
- 非块级元素：
inline、inline-block、table-cell元素的垂直 margin 从不合并（哪怕视觉上挨着） - 脱离普通文档流的元素：
Float元素、position: absolute或position: fixed元素，与任何其他元素都不会发生 margin 合并 - Flex 和 Grid 容器的直接子项：当父容器设为
display: flex或display: grid，子元素之间的margin-top/margin-bottom完全独立，互不影响 - 不在同一块格式化上下文（BFC）中的元素：比如一个元素在
overflow: hidden容器内，另一个在外部，它们的 margin 就不会相遇，自然不合并
为什么加了 border 或 padding 就能“断开”合并
这不是魔法，而是 css 规范明确定义的触发条件：合并只发生在“无分隔”的相邻外边距之间。一旦中间出现任何“物理隔离物”，浏览器就认为“它们没真正接触”，于是放弃合并逻辑。
-
border（哪怕border: 1px solid transparent）会创建一个不可见但语义明确的边界层 -
padding（哪怕padding-top: 1px）在元素内部撑开空间，使子元素 margin 不再“贴着父容器边缘” - 注意：
outline不算隔离物，它不占布局空间，无法阻止合并 - 副作用：加
border会改变盒模型尺寸，建议同步加box-sizing: border-box
常见误判：以为“用了 display: inline-block 就安全了”，其实有坑
display: inline-block 确实能避免 margin 合并，但它引入了另一个更隐蔽的问题：元素间的换行符或空格会被渲染成约 4px 的空白间隙，导致水平排列错位或间距失控。
- 这个间隙不是 margin，无法用
margin: 0清除 - 临时解法包括：
font-size: 0在父容器上，或删 HTML 换行、用注释<!-- -->连接标签 - 长期看，这类 hack 易出错且难维护，不如直接切到
display: flex或display: grid - 同理，
float虽然阻断合并，但会导致父容器高度坍塌，必须额外清浮动，已不推荐
最干净的排除方式：用 layout mode 替代 margin 控制
与其不断“防合并”，不如换一套不依赖 margin 做间距的方案。现代布局模型从设计上就绕开了这个问题。
立即学习“前端免费学习笔记（深入）”；
- Flex 布局：
display: flex; flex-direction: column;+gap: 20px，间距完全可控，响应式友好，且gap不受 margin 合并影响 - Grid 布局：
display: grid; row-gap: 20px，同样免疫，还支持复杂二维间隔控制 - 兼容性注意：IE 不支持
gap（IE11 及以下），如需兼容，可降级用margin-bottom统一控制，或用display: flow-root创建 BFC 隔离
真正容易被忽略的是：很多开发者花时间调 margin-top 和 margin-bottom 的数值，却没意识到问题根源是“让两个 margin 去碰面”。只要不让它们见面——不管是加个透明边框、换个 display、还是换种布局——问题就不存在了。