相邻元素margin重叠不是bug，而是css规范定义的垂直方向合并行为：兄弟元素间取margin-bottom与margin-top较大值（如20px和30px得30px），水平方向不合并；解决关键在于可控隔离，推荐display:flow-root创建bfc阻断合并，兼容现代浏览器且无副作用。
相邻元素的 margin 重叠不是 bug，是 CSS 规范明确规定的垂直方向 margin 合并行为；想“彻底解决”，关键不是消灭它，而是用可控方式隔离或绕过它。
为什么两个 div 的 margin-bottom 和 margin-top 加起来只有 30px？
这是典型的兄弟元素 margin 合并：上面元素设 margin-bottom: 20px，下面元素设 margin-top: 30px，最终间距取较大值 30px。水平方向（margin-left/margin-right）永远不合并，只发生在垂直方向的块级元素之间。
常见踩坑点：
- 动态插入元素后空隙“变小了”，其实是新元素参与了合并
- 用
margin: auto居中时，它不参与合并，但容易误以为是合并失效 - 调试时只看单个元素的 computed styles，漏掉了“相邻”这个前提条件
阻止合并最干净的方式：用 display: flow-root
给包裹这些相邻元素的父容器加 display: flow-root，它会创建一个 BFC（块级格式化上下文），内部子项的垂直 margin 就不再和外部合并——包括兄弟间、也包括父子间。
示例：
.list {
display: flow-root;
}
.list > * {
margin: 16px 0;
}
优势：
- 语义清晰：专为解决此类问题设计，不是“借 overflow 隐藏副作用”
- 无视觉副作用：不裁剪
position: absolute子元素，不增加盒模型尺寸 - 现代浏览器全覆盖：Chrome 58+ / Firefox 59+ / Safari 15.4+
注意：IE 完全不支持，需单独处理兼容性。
兼容老浏览器时，overflow: hidden 真的够用吗？
可以，但它有隐藏风险：
- 如果子元素用了
position: absolute且超出父容器范围，会被裁剪 - 带
box-shadow或transform的元素可能被意外截断 - 某些动画或滚动场景下，
overflow: hidden会干扰预期行为
更稳妥的降级写法是：
.container {
padding: 1px; /* 比透明边框更可控，不改变渲染逻辑 */
}
.container > * {
margin: 16px 0;
}
只要父容器有非零 padding（哪怕 0.01px），就能阻断父子及兄弟间的合并链路。
Flex/Grid 布局能一劳永逸吗？
能，但要看场景：
-
display: flex或display: grid的直接子元素，其margin绝对不会合并 - 但若你只是想排几个段落或卡片，硬套 Flex 可能过度设计——比如破坏语义流、影响可访问性顺序、或让响应式变得复杂
- 更现实的做法是：局部用
flow-root，全局布局才用 Flex/Grid
真正容易被忽略的是：合并可能跨多层传递。比如孙元素的 margin-top 没被父容器拦住，会一路“穿透”到曾祖容器外边距上。此时单加一层 padding 不够，得逐层检查 BFC 创建点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
