margin塌陷
CSS中的外邊距塌陷（Margin Collapse）問題是指在垂直方向上，當(dāng)兩個或多個塊級元素的邊距相遇時，它們之間的距離不是它們各自邊距的總和，而是其中的最大值。這種現(xiàn)象主要出現(xiàn)在塊級元素的上下外邊距之間。
<div class="box ac">Box 1</div>
<div class="box bc">Box 2</div>
.box {
width: 100px;
height: 100px;
color: white;
}
.ac {
background: red;
margin-bottom: 20px;
}
.bc {
background: blue;
margin-top: 30px;
}
.ac和.bc有上下margin但是只生效了一個最大值。
產(chǎn)生原因
外邊距塌陷只發(fā)生在垂直方向的塊級元素上，原因如下：
- 相鄰兄弟元素：垂直排列的兩個兄弟元素之間的邊距會發(fā)生塌陷。
- 父子元素邊距：當(dāng)一個塊級元素為空（或高度為0），并且它的上（和/或）下邊距有值時，如果它與子元素之間沒有邊框、內(nèi)邊距、內(nèi)聯(lián)內(nèi)容、或創(chuàng)建了BFC（塊格式化上下文）的元素分隔，那么它的邊距會和子元素的邊距發(fā)生塌陷。
- 空塊級元素的邊距：如果一個塊級元素不包含任何內(nèi)容，并且它的上下邊距都有值，這兩個邊距可能會發(fā)生塌陷。
解決方案
- 使用邊框（border）或內(nèi)邊距（padding）：通過設(shè)置border或者padding來解決。
.ac {
background: red;
margin-bottom: 20px;
border-bottom: 20px solid white;
}
- 創(chuàng)建塊格式化上下文（BFC）：在元素上創(chuàng)建一個新的BFC可以阻止它與外部元素的外邊距塌陷，常見的創(chuàng)建BFC的方法包括設(shè)置元素的overflow屬性為hidden、auto, 或者 scroll。
HTML：
<div class="container">
<div class="box ac">Box 1</div>
</div>
<div class="box bc">Box 2</div>
CSS：文章來源：http://www.zghlxwxcb.cn/news/detail-833524.html
.box {
width: 100px;
height: 100px;
color: white;
}
.ac {
background: red;
margin-bottom: 20px;
}
.bc {
background: blue;
margin-top: 30px;
}
.container {
overflow: hidden;
}
文章來源地址http://www.zghlxwxcb.cn/news/detail-833524.html
- 使用偽元素：在父元素中添加偽元素，并為偽元素設(shè)置display: table;，這樣可以阻止與子元素之間的外邊距塌陷。
.container {
display: table;
}
- 設(shè)置display: flex或display: grid：為父元素設(shè)置Flex或Grid布局會創(chuàng)建一個新的布局上下文，也可避免邊距塌陷。
.container {
display: flex;
}
到了這里，關(guān)于CSS之margin塌陷的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
