第一種 ——經(jīng)典的相鄰marign重疊的問題
當(dāng)一個元素出現(xiàn)在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。
邊距重疊計算方式
a、全部都為正值，取最大者；
b、不全是正值，則都取絕對值，然后用正值減去最大值；
c、沒有正值，則都取絕對值，然后用0減去最大值。
<style>
*{
margin:0;
padding: 0;
}
.divout{
width: 100px;
height: 100px;
background: yellow;
margin-bottom: 50px;
border: 1px solid black;
}
.divout1{
width:50px;
height: 50px;
background: yellow;
margin-top: 80px;
/*float:left;*/
/*position:absolute;*/
border: 1px solid black;
}
</style>
<body>
<div class="divout">
</div>
<div class="divout1">
</div>
</body>
邊距重疊.png
解決辦法：
1、 將元素設(shè)置為浮動 float:left;
2、 在設(shè)置margin-top/bottom值時統(tǒng)一設(shè)置上或下
3、 元素的position的值為absolute/fixed
第二種 ——元素和父元素margin值問題
父元素?zé)o border、padding、inline content 、 clearance時，子元素的margin-top/bottom會與父元素的margin產(chǎn)生重疊問題。
<style>
*{
margin:0;
padding: 0;
color: black;
}
#parrent{
width:300px;
height:150px;
margin-top: 20px;
background:teal;
}
#box1{
width:100px;
height:100px;
background:aqua;
margin:100px 0;
}
</style>
<body>
<div id="parrent">
<div id="box1">
我是box1
</div>
我是內(nèi)容
</div>
</body>
子元素沒設(shè)置margin值.png
子元素設(shè)置margin值.png
解決辦法
1、外層元素padding代替
2、內(nèi)層元素透明邊框 border:1px solid transparent;
3、內(nèi)層元素絕對定位 postion:absolute:
4、外層元素 overflow:hidden;
5、內(nèi)層元素 加float:left;或display:inline-block;
6、內(nèi)層元素padding:1px;
7、外層元素有邊框
8、內(nèi)層元素不是第一個元素；
注釋：只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。行內(nèi)框、浮動框或絕對定位之間的外邊距不會合并。
