如果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 外边距合并
