极客观点
项目管理
HarmonyOS
《精通css 高级web标准解决方案》一书讲到盒模型的时候、这么说到：外边距甚至可以与本身发生叠加。假设有一个空元素，他有外边距，但是没有边框或内边距。在这种情况下，顶外边距与底外边距就碰到了一起，它们会发生叠加。
并且给出了图事例，如下图：
根据它所说我写下了如下代码，
<body>
<div style="margin-top:20px;margin-bottom:20px"></div>
</body>按照它的意思是不是这个空的div就只占据20px呢？但是实际上在浏览器中看到如下图所示，
它还是占据了40px而不是20px哇？是我理解的不对么？
但是我又写下了如下代码，
<body>
<div style="margin-top:20px;margin-bottom:20px"></div>
<div>Test</div>
</body>
这时，包含Test的div的margin-top就是20px而不是40px了，莫非是按照我第二种理解来么？只有当有多个元素的时候，才会发生如书上所说的叠加，而当页面上只有一个空元素的时候并不会发生margin-top与margin-bottom的叠加。
是这样理解的么？
泻药。
首先，我们先理一下边距重叠发生的一个非常必要的情况，在
CSS规范中很清楚明白的规定了一个必要条件，那就是存在两个及以上的盒子模型(包括但不限于兄弟)，相邻的边距会发生重叠，或者说合并。其次，我们再理理问题中的代码。
第一种
div并没有相邻的盒模型存在，所以div本身的margin并不会发生重叠的情况。第二种
设置了
margin的div这个时候有了兄弟元素的存在，满足了发生边距重叠的条件，所以虽然设置了40px的margin，但是实际上已经塌陷成了20px。要注意一点的是，盒子本身上下margin重叠情况的条件是，该盒子必须是空元素，如果有内容撑开，那么本身的margin是不会重叠的。总的来说，边距重叠首先要满足一个条件，那就是只有存在多个盒子的时候，相邻的
margin才会发生重叠的情况，否则是不会发生这种情况的。