margin 折叠是指垂直相邻块级元素的 margin-top 与 margin-bottom 合并为较大值的现象，仅发生于普通文档流中；加 border 或 padding 可插入屏障阻止折叠；推荐用统一 margin 方向、BFC 或 gap 替代。
什么是 margin 折叠（collapsing margins）
当两个垂直相邻的块级元素的 典型表现：你给一个 margin 折叠发生的前提是“相邻且无隔离”。只要在两个可能折叠的 margin 之间插入一个“屏障”，折叠就失效。这个屏障可以是： 关键点：这个屏障必须属于其中一个参与折叠的元素自身，或其父容器（且该父容器需满足 BFC 条件）。单纯给父元素加 立即学习“前端免费学习笔记（深入）”； 光靠 示例：两个 margin 折叠不只发生在兄弟元素间，还可能跨层级： 最常踩的坑是：以为加了 margin-top 和 margin-bottom 直接接触时，浏览器会把它们合并成一个 margin，取其中较大的那个值——这就是 margin 折叠。它只发生在普通文档流中的块级盒子之间，常见于 、 等元素。 设了 margin-bottom: 20px，下一个 设了 margin-top: 30px，结果两者间距不是 50px，而是 30px。加 border 或 padding 为什么能阻止折叠
border（哪怕只有 1px solid transparent）padding（哪怕只有 padding-top: 1px）overflow: hidden）padding 不一定管用，要看结构。实际中更稳妥的写法有哪些
border 或 padding 容易引入视觉干扰或破坏布局预期，推荐组合策略：
margin-bottom，避免同时设 margin-top 和 margin-bottom
overflow: hidden、display: flow-root（现代推荐）、contain: layout
gap 替代 margin（仅限 Flex/Grid 容器内子项）border-top: 1px solid transparent，比 padding 更轻量且不影响盒尺寸计算（除非 box-sizing 是 content-box）.item {
margin: 20px 0;
}
.item + .item {
border-top: 1px solid transparent; /* 插入屏障 */
}容易被忽略的边界情况
）会完全消失，其 margin 仍参与折叠gap 控制，不是靠 margin）padding 就万事大吉，结果发现父容器没设 box-sizing: border-box，导致整体高度意外增加；或者用了 display: inline-block 却忘了换行符产生的空白间隙。
