外边距重叠是相邻块级元素垂直margin合并取较大值的规范行为；加border或padding可阻止父-子间重叠，因它们破坏了无分隔物条件；推荐首选display: flow-root创建BFC解决。
什么是外边距重叠（margin collapse）
两个相邻块级元素的垂直 margin 会合并成一个，取其中较大者，而不是相加。这不是 bug，是 CSS 规范定义的行为，但常导致布局“比预期更紧凑”，尤其在列表、标题+段落、或动态插入元素时意外消失空隙。
为什么加 border 或 padding 能解决
外边距重叠只发生在「普通流中的块级盒」且「没有分隔物（如 border、padding、inline content、clearance）」之间。只要父容器有 border（哪怕 border: 1px solid transparent）或非零 padding，就会阻止子元素与父容器之间的 margin 传递和合并。
-
border必须是真实渲染的——border: none不行，border: 0也不行；transparent可以，只要宽度 > 0 -
padding只要大于0就生效，比如padding-top: 0.01px也管用，但语义上不如padding: 1px清晰 - 这个方法只影响「父-子」间的重叠；兄弟元素间重叠仍存在，需另加
display: flow-root或其他隔离手段
替代方案对比：哪些情况不该用透明边框
加透明边框虽简单，但在某些场景下不理想：
- 需要精确控制盒模型尺寸时：
border会增加总宽高，可能破坏已有的width: 100%布局，得配合box-sizing: border-box - 使用
outline或box-shadow调试时，透明边框可能干扰视觉判断 - SSR 或服务端渲染中，若样式被 purge（如 Tailwind 的
border-transparent被误删），就失效了 - 更现代的解法是
display: flow-root，它创建 BFC，不改变盒尺寸，兼容性到 Chrome 58+/Firefox 34+，IE 不支持
实际写法建议与常见踩坑
别硬记“加边框就行”，要看上下文。以下写法按推荐度排序：
立即学习“前端免费学习笔记（深入）”；
- 首选：
display: flow-root—— 无副作用，语义明确，一行解决父-子 margin 重叠 - 次选：
padding: 1px—— 比透明边框更易维护，且不会因 border-style 变化意外失效 - 慎用：
border: 1px solid transparent—— 确保你真需要这个边框占位，否则容易在缩放、打印、或高对比度模式下暴露异常 - 避免：
overflow: hidden（也能触发 BFC）—— 可能裁剪子元素的position: absolute内容或阴影
真正容易被忽略的是：重叠可能跨多层（比如孙元素的 margin 传到曾祖容器），此时单加一层 padding 不够，得逐层检查 BFC 创建点。
