CSS 为什么外边距不会发生折叠

在本文中，我们将介绍为什么CSS中的外边距不会发生折叠的原因。外边距折叠是指当两个相邻的块级元素的外边距相遇时，它们的外边距将会合并为一个外边距的现象。然而，在一些特定的情况下，外边距不会发生折叠，可能会导致网页布局不符合我们的预期。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

什么是外边距折叠？

外边距折叠是指在特定情况下，父元素和子元素之间的外边距会合并在一起，从而产生一个合并的外边距。折叠后的外边距取两个外边距中的较大值。这种现象会导致网页布局的一些意外结果。

外边距折叠的规则

外边距折叠并不是随机发生的，它有一些具体的规则。

父子元素的外边距折叠：当父元素的上外边距与子元素的第一个子元素的上外边距相遇时，它们会发生合并，并且合并后的外边距是两者中的较大者。
```
<style>
.parent {
 margin-top: 20px;
 padding: 10px;
 background-color: lightblue;
}
.child {
 margin-top: 30px;
 padding: 10px;
 background-color: lightgreen;
}
</style>

<div class="parent">
 <div class="child">子元素</div>
</div>
```
在上述示例中，父元素的上外边距和子元素的上外边距会发生合并，最终结果为30px的外边距。
兄弟元素的外边距折叠：当两个相邻的兄弟元素的上下外边距相遇时，它们会发生合并，并且合并后的外边距是两者中的较大者。
```
<style>
.sibling {
 margin-bottom: 20px;
 padding: 10px;
 background-color: orange;
}
</style>

<div class="sibling">元素1</div>
<div class="sibling">元素2</div>
```
在上述示例中，两个相邻的兄弟元素的上下外边距会发生合并，最终结果为20px的外边距。

不会发生外边距折叠的情况

虽然外边距折叠是一种普遍的现象，但在某些情况下，外边距不会发生折叠。

当一个元素的上外边距与其包含块的上外边距相遇时，它们不会发生折叠。

<style>
.container {
 margin-top: 20px;
 padding: 10px;
 background-color: lightblue;
}
.child {
 margin-top: 30px;
 padding: 10px;
 background-color: lightgreen;
}
</style>

<div class="container">
 <div class="child">子元素</div>
</div>

在上述示例中，包含块的上外边距和子元素的上外边距不会发生折叠，最终结果为两者相加的50px的外边距。

浮动元素的外边距不会发生合并。

<style>
.float {
 margin-top: 20px;
 float: left;
 padding: 10px;
 background-color: lightblue;
}
.child {
 margin-top: 30px;
 padding: 10px;
 background-color: lightgreen;
}
</style>

<div class="float">浮动元素</div>
<div class="child">子元素</div>

在上述示例中，浮动元素和子元素的外边距不会发生合并，最终结果为两者相加的50px的外边距。

总结

本文介绍了外边距折叠的概念和规则。外边距折叠是指父子元素的上下外边距或兄弟元素的上下外边距相遇时会发生的一种现象。具体规则包括父子元素的外边距折叠和兄弟元素的外边距折叠。然而，有些情况下外边距不会发生折叠，比如当一个元素的上外边距与其包含块的上外边距相遇，或者浮动元素的外边距。了解外边距折叠的规则对于设计和布局网页至关重要。