为何CSS外边距不会与容器内边距发生折叠？

嘿，我完全懂你的困惑——毕竟外边距折叠本身就够让人绕晕的，刚接触CSS很容易把不同盒子模型属性的作用逻辑混在一起。首先得把核心规则掰明白：外边距折叠（margin collapsing）只发生在块级元素的外边距之间，容器的padding和内部元素的margin根本不在折叠规则的覆盖范围内。

咱们从CSS盒子模型的底层逻辑拆解你的场景：

• 容器设置padding: 20px，这是容器自身的“内部缓冲空间”——意味着容器的内容区和它的边框之间，会留出20px的距离。简单说就是，容器内容区的顶部距离容器边框顶部有20px。
• 内部元素设置margin-top: 20px，这是元素自身的“外部缓冲空间”——是元素相对于它的包含块（也就是容器的内容区）的顶部偏移量。

这两个属性作用的是完全不同的“空间层”：一个是容器内部的预留空间，一个是元素自身向外延伸的空间，所以它们会直接叠加计算，最终元素顶部到容器边框顶部的距离就是20px（容器padding） + 20px（元素margin）= 40px，这完全符合CSS的标准计算逻辑。

那什么时候才会触发外边距折叠呢？举个对比例子你就清楚了：如果容器没有设置padding，反而容器自己有margin-top:20px，内部元素也有margin-top:20px，这时候两个垂直外边距就会折叠——最终容器（带着内部元素）距离它的父容器顶部只有20px，而不是40px。这才是外边距折叠的典型场景：折叠只发生在**两个相邻的外边距（属于不同元素，或者同一元素的上下边距）**之间，和内边距完全不沾边。

总结一下：内边距是容器的“内部留白”，外边距是元素的“外部留白”，它们分属盒子模型的不同部分，从设计逻辑上就不存在折叠的可能，所以自然会叠加计算。

内容的提问来源于stack exchange，提问作者Leonel Galán