CSS垂直外边距塌陷问题咨询：为何两元素实际间距为50px而非70px？

嘿，这个问题我刚入门CSS的时候也困惑过好一阵！咱们来拆解一下这个margin collapse（外边距塌陷）的逻辑。

简单来说，垂直方向上相邻的两个块级元素（比如你例子里的h1和h2，默认都是块级元素），它们的上下外边距不会像咱们直觉里那样叠加计算，而是会取两者中数值更大的那个作为最终的间距。

放到你的例子里看：

• h1的底部外边距是50px
• h2的顶部外边距是20px

这两个外边距在垂直方向上直接“贴”在了一起，浏览器就会触发外边距塌陷规则，舍弃较小的20px，只保留较大的50px作为两者之间的实际间距，所以最终不是70px而是50px。

顺便说一下，垂直外边距塌陷主要发生在这几种场景：

• 相邻的兄弟块级元素（就是你遇到的情况）
• 父元素和第一个/最后一个子元素（如果父元素没有padding、border，也没有inline内容来分隔的话）
• 空的块级元素（自身的上下外边距会塌陷成一个值）

如果想避免这种塌陷，你可以给其中一个元素加个padding或者border来“隔开”两个外边距，比如给h1加个透明的底部边框：

h1 { 
  margin: 0 0 50px 0; 
  border-bottom: 1px solid transparent; 
}
h2 { margin: 20px 0 0 0; }

这样两个外边距就会正常叠加成70px了。

你的原始代码示例：

h1 { margin: 0 0 50px 0; }
h2 { margin: 20px 0 0 0; }

<h1>Heading 1</h1>
<h2>Heading 2</h2>

内容的提问来源于stack exchange，提问作者Rajadurai M