什么是CSS外边距重叠怎么用

CSS外边距重叠（Margin Collapsing）是CSS盒模型中的一个特性。当两个或多个相邻的元素在垂直方向上具有外边距（margin），并且这些外边距相遇时，它们会形成一个外边距，而不是简单地相加。这个新形成的外边距的高度通常等于两个发生重叠的外边距中的较大者。

外边距重叠主要发生在以下三种情况：

相邻兄弟元素：当两个块级元素相邻（上下排列），且它们之间没有任何内容、padding或border分隔时，它们的垂直外边距会发生重叠。

 

例如：

css

h1 {

  margin-bottom: 20px;

}

 

p {

  margin-top: 30px;

}

 

在上述CSS样式中，一个<h1>元素和一个<p>元素相邻。尽管我们分别为它们设置了margin-bottom: 20px;和margin-top: 30px;，但实际显示时，这两个元素之间的外边距并非50px，而是30px，因为发生了外边距重叠。

2. 父元素和第一个或最后一个子元素：如果一个块级元素的上外边距和其第一个子元素的上外边距，或者下外边距和其最后一个子元素的下外边距相遇，那么这两个外边距也会发生重叠。

 

例如：

css

.parent {

  margin-bottom: 20px;

}

 

.child {

  margin-top: 30px;

}

 

在上述CSS样式中，.parent是.child的父元素。虽然分别设置了margin-bottom: 20px;和margin-top: 30px;，但两者相遇时，它们之间的外边距会重叠为30px。

3. 空的块级元素：如果一个块级元素没有border, padding, inline content, height, 或者min-height，那么它的上外边距和下外边距就会发生重叠。

使用外边距重叠时，需要注意它可能会导致元素之间的间距不如预期。在设计页面布局时，需要仔细考虑这一点，并可能通过添加border、padding或其他内容来避免不期望的外边距重叠。