两个元素边距垂直折叠然后实际尺寸？

Question

我正在学习W3Schools的CSS3。这个说明令我困惑，请帮助我理解这个例子。

h1元素的下边距为50px，h2元素的上边距为20px。然后，h1和h2之间的垂直边距应为70px（50px + 20px）。但是，由于保证金崩溃，实际保证金最终为50px。这是为什么？

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

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

Answer 1

边距相互坍塌，导致50px的差距。如果您希望获得70px的保证金，则必须至少将其中一个保留为70px。