有时两个边距会折叠成一个边距。
元素的顶部和底部边距有时会折叠成一个 边距等于两个边距中最大的一个。
这不会发生在左右边缘!只有顶部和底部边距!
看下面的例子:
margin崩溃演示:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
</style>
</head>
<body>
<p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. So, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</body>
</html>
在上面的示例中,<h1> 元素的下边距为 50px, <h2> 元素的上边距设置为 20px。
常识似乎表明 <h1> 之间的垂直边距 <h2> 的总大小为 70px (50px + 20px)。但由于利润率崩溃, 实际边距最终为 50px。
用于在一个声明中设置所有边距属性的简写属性
设置元素的下边距
设置元素的左边距
设置元素的右边距
设置元素的上边距