如果A-B元素是并列關系
image.png
也就是說如果相鄰元素A-B，如果B的上邊距和A的下邊距碰上了，那么會怎么處理？兩個相加還是取其大的。是取其大的。想想為啥這么設計？
因為這是公共邊距。兩個都有盡量滿足。
如果A包含B
舉個例子
<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>注釋：請注意，如果不設置 div 的內邊距和邊框，那么內部 div 的上外邊距將與外部 div 的上外邊距合并（疊加）。</p>
</body>
</html>
結果如圖。本來A的上邊距100px，B的上邊距10px。然后A包含B。那么以大的為準。如果改成A上邊距20px，B上邊距100px。結果還是一樣的。
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>
結果如下
image.png
或者給父元素加padding
外邊距為啥要合并(AB并列式）
外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，后續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。
CSS 外邊距合并
