第一種 ——經(jīng)典的相鄰marign重疊的問題
當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)芳绩，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會發(fā)生合并掀亥。
邊距重疊計(jì)算方式
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值時(shí)統(tǒng)一設(shè)置上或下
3枯跑、 元素的position的值為absolute/fixed
第二種 ——元素和父元素margin值問題
父元素?zé)o border惨驶、padding、inline content 敛助、 clearance時(shí)粗卜，子元素的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)層元素不是第一個(gè)元素；
注釋：只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并善已。行內(nèi)框灼捂、浮動框或絕對定位之間的外邊距不會合并。
