問題描述
今天在修改頁面樣式的時候，遇到子元素設定margin-top 但是并沒有使得子元素與父元素之間產生間隔，而是作用在了其父元素上，導致父元素產生了一個margin-top 的效果，
今天就來說說整個問題產生的原因，以及解決方案，
問題分析
在MDN上面有這么一段文字：
塊的上外邊距(
margin-top)和下外邊距(margin-bottom)有時合并(折疊)為單個邊距，其大小為單個邊距的最大值，這種行為稱為邊距折疊，
注意：只有上下邊距會產生折疊，左右邊距不會產生折疊，
有三種情況會產生邊距折疊：
1、同一層相鄰元素之間
<div >元素A</div>
<div >元素B</div>
<style>
.A,
.B {
width: 50px;
height: 50px;
}
.A {
background: yellow;
margin-bottom: 10px;
}
.B {
background: pink;
margin-top: 20px;
}
</style>
上面兩個p標簽之間的間隔是20px，
解決辦法：
第二個元素B，設定清除浮動clearfix
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
2、父子元素之間沒有內容
例子中，A，B元素與父元素box之間沒有其他元素的情況下：
<div >
<div >元素A</div>
<div >元素B</div>
</div>
<div >Next</div>
<style>
.box {
margin-top: 10px;
margin-bottom: 10px;
background: #eee;
}
.A,
.B {
width: 50px;
height: 50px;
}
.A {
background: yellow;
margin-top: 20px;
}
.B {
background: pink;
margin-bottom: 20px;
}
.next {
height: 50px;
background: #eee;
}
</style>
解決辦法：
- 父元素創建塊級格式背景關系（
overflow:hidden） - 父元素設定上下border（
border: 1px solid transparent）、 - 父元素設定上下padding（
padding: 1px 0） - 子元素采用浮動
float或者定位position的方式排列，
注意：即使設定父元素的外邊距是0，
margin: 0，第一個或最后一個子元素的外邊距仍然會“溢位”到父元素的外面，
3、空的塊級元素
當元素B的margin-top直接貼到元素A的margin-bottom的時候（也就是中間的元素沒有內容），也會發生邊界折疊，
<div >top</div>
<div ></div>
<div >bottom</div>
<style>
.top,.bottom {
width: 50px;
height: 50px;
background: pink;
}
.middle {
margin-top: 10px;
margin-bottom: 20px;
}
</style>
解決方法：
-
middle元素清除浮動：
clearfix -
middle元素創建塊級格式背景關系：
overflow:hidden -
middle元素設定為行內塊元素：
display: inline-block; -
middle元素設定高度：
height: 1px; -
middle元素設定最小高度：
min-height: 1px; -
middle元素設定border：
border-top: 1px solid transparent; -
middle元素設定padding：
padding-top: 1px;
注意事項
- 如果參與折疊的margin中包含負值，折疊后的margin的值為
最大的正邊距與最小的負邊距（即絕對值最大的負邊距）的和；也就是說如果有-10px,10px,30px疊在一起，margin的范圍就是 30px-10px=20px， - 如果所有參與折疊的外邊距都為負，折疊后的外邊距的值為
最小的負邊距的值，這一規則適用于相鄰元素和嵌套元素，
參考鏈接
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
原文首發地址：https://github.com/Daotin/fe-blog/issues/
你也可以從下面地方找到我：
- Github個人主頁
- 公眾號：前端隊長
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/252969.html
標籤：JavaScript
上一篇：SharePoint 2019解決方案：Web Parts Maintenance Page例外解決方案
下一篇：前端模塊化詳解(完整版)