外边距重叠只发生在块级元素垂直方向，需满足相邻、同属一个BFC、无border/padding分隔；用padding可避免但需配合box-sizing: border-box，或用border/overflow/gap等更轻量方案。
外边距重叠（margin collapse）到底在什么情况下发生
只发生在**块级元素的垂直方向**，而且必须满足三个条件：相邻、同属一个BFC、都没有border/padding分隔。常见于连续的 <p>、<div>，或者父元素和第一个/最后一个子元素之间。
典型现象：margin-top: 20px 和 margin-bottom: 20px 相邻时，实际间距不是40px，而是20px；父容器设了 margin-top，但整个块却“贴”在上边——其实是子元素的上外边距把它顶上去了。
用padding代替margin真能彻底避开重叠吗
能，但得看场景。padding 不参与重叠，也不会触发父容器的 margin collapse，所以只要把原本写在子元素上的 margin 拆出来，改到父容器的 padding 上，就能稳住间距。
不过要注意几点：
立即学习“前端免费学习笔记（深入）”；
- padding 会增大元素的总尺寸（除非用了
box-sizing: border-box） - 如果父容器有背景色或边框，padding 区域也会被包含进去，视觉上可能比预期“更满”
- 不能替代所有 margin 场景——比如需要脱离文档流的居中、与兄弟元素动态对齐时，margin 仍是唯一选择
示例：原来这样写容易塌陷
<div class="container">
<p>第一段</p>
<p>第二段</p>
</div>
<p>.container p {
margin: 20px 0;
}改成用 padding 控制整体间距更可控：
.container {
padding: 20px 0;
}
.container p {
margin: 0;
}box-sizing: border-box 是不是必须加
强烈建议加。不加的话，给父容器加 padding 会让它比设计稿宽出一截，尤其在响应式布局里容易挤破容器或触发横向滚动。
原因很简单：默认 box-sizing: content-box 下，width: 100% 只算内容区，padding 和 border 都额外加在上面。
一行解决：
* {
box-sizing: border-box;
}或者只针对需要的容器：
.container {
box-sizing: border-box;
padding: 20px;
}有没有比padding更轻量的替代方案
有，但要看目的。如果只是想阻止父-子之间的 margin collapse，不一定非得动 padding：
- 给父容器加
border-top: 1px solid transparent—— 最小侵入，不改变布局尺寸 - 给父容器加
overflow: hidden或display: flow-root—— 创建新 BFC，直接切断 collapse 链路 - 用
gap（仅限 Flex/Grid 容器）—— 语义清晰、无副作用，但不兼容 IE
比如 Flex 布局下，margin 重叠根本不会发生，直接用 gap: 20px 更干净。
真正容易被忽略的是：重叠不是 bug，是 CSS 规范明确规定的特性。硬用 padding “绕开”，有时反而掩盖了结构问题——比如本该用语义化标签或 Flex 组织的内容，却靠 padding 撑开，后期维护成本更高。
