如果A-B元素是并列關(guān)系
image.png
也就是說如果相鄰元素A-B函筋，如果B的上邊距和A的下邊距碰上了，那么會(huì)怎么處理奠伪？?jī)蓚€(gè)相加還是取其大的跌帐。是取其大的。想想為啥這么設(shè)計(jì)绊率？
因?yàn)檫@是公共邊距含末。兩個(gè)都有盡量滿足。
如果A包含B
舉個(gè)例子
<html>
<head>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
#outer {
width:300px;
height:300px;
background-color:red;
margin-top:100px;
}
#inner {
width:50px;
height:50px;
background-color:blue;
margin-top:20px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
<p>注釋：請(qǐng)注意即舌，如果不設(shè)置 div 的內(nèi)邊距和邊框佣盒，那么內(nèi)部 div 的上外邊距將與外部 div 的上外邊距合并（疊加）。</p>
</body>
</html>
結(jié)果如圖顽聂。本來A的上邊距100px肥惭，B的上邊距10px。然后A包含B紊搪。那么以大的為準(zhǔn)蜜葱。如果改成A上邊距20px，B上邊距100px耀石。結(jié)果還是一樣的牵囤。
image.png
那如果你不想讓外邊距合并怎么辦呢？
給父元素加邊框就可以
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
#outer {
width:300px;
height:300px;
background-color:red;
margin-top:100px;
border:2px solid black;
}
#inner {
width:50px;
height:50px;
background-color:blue;
margin-top:20px;
}
</style>
結(jié)果如下
image.png
外邊距合并的幾種現(xiàn)象及解決方式 - 簡(jiǎn)書
或者給父元素加padding
外邊距為啥要合并(AB并列式）
外邊距合并初看上去可能有點(diǎn)奇怪，但是實(shí)際上揭鳞，它是有意義的炕贵。以由幾個(gè)段落組成的典型文本頁面為例。第一個(gè)段落上面的空間等于段落的上外邊距野崇。如果沒有外邊距合并称开，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍乓梨。如果發(fā)生外邊距合并鳖轰，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了扶镀。
CSS 外邊距合并
