CSS 边距折叠

有时，两个边距会折叠成一个边距。

边距折叠

元素的上边距和下边距有时会折叠成一个边距等于两个边距中最大的边距。

这不会发生在左边距和右边距上！只有上边距和下边距！

请看以下示例：

边距折叠的演示：

h1 {  margin: 0 0 50px 0;}  

h2 {  margin: 20px 0 0 0;}

在上面的示例中，<h1> 元素的下边距为 50px，并且 <H2> 元素的上边距设置为 20px。

常识似乎表明，<h1>之间的垂直边距 <h2>总共为 70px （50px + 20px）。但由于边距折叠，实际边距最终为 50px。