CSS 边距折叠


目录

    显示目录


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


保证金崩溃

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

这不会发生在左右边缘!只有顶部和底部边距!

看下面的例子:

例子

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。



所有 CSS 边距属性

margin

用于在一个声明中设置所有边距属性的简写属性

margin-bottom

设置元素的下边距

margin-left

设置元素的左边距

margin-right

设置元素的右边距

margin-top

设置元素的上边距