CSS 边距合并（折叠）

顶边距和底边距有时候会被合并成一个边距，这个就叫做边距合并（折叠）。即使边距没有设置或者设置的是0也是有可能会发生这个现象的。

边距合并（折叠）的适用范围

display是block的，这是因为inline元素的顶边距和底边距虽然会生效，但是并不会有阻止重叠的效果，因此也没有必要进行边距合并的操作了，各自按各自的边距去显示即可。
只针对垂直方向的边距因此如下代码只设置了左右边距
css 复制代码
```
<div style="display: inline-block; margin-right: 20px;">p1</div><div style="display: inline-block; margin-left: 20px;">p2</div>
```
会有下图所示的效果（注意此图是示意图，并非完全是上述代码所显示的效果）：

可以看到水平方向的边距并没有合并，而是使用各自的边距之和，导致两个元素中间的距离有40px。

拓展：

1.如果上述代码改成如下：
css 复制代码
```
<div style="display: inline-block;">p1</div>
<div style="display: inline-block;">p2</div>
```
那么两个元素之间即使没有设置水平边距，也会有一个默认的距离，大概是

inline-blcok块之间的不可见符号会被保留父层字体的1/3大小的空间

这里所说的不可见字符，在上述代码这个例子中，其实是指的html文件中两个div之间的回车符号。（参考前端 - 【整理】几种解决inline-block间隙的方案 - willspace - SegmentFault 思否）

2.与其说是边距合并只发生在垂直方向上，不如说是发生在block元素的分布方向上，我们可以通过修改writing-mode这个属性来将垂直这个默认的分布方向改成水平，那么这个时候边距合并就会发生在水平方向上了。
浮动元素或者绝对定位的元素的边距是不会合并的。
flex或者grid元素的子元素的边距也是不会合并的。
相邻的同级元素可能会发生边距合并现象（除非后面的元素需要清除之前的浮动？）
没有内容间隔的父子元素之间会发生边距合并现象
一个元素的顶边距和底边距之间没有任何内容，此时会发生边距合并现象

边距合并（折叠）的计算规则

两个相邻的同级元素，分别设置了底边距和顶边距，并且都是大于等于0的值

html代码：
html 复制代码
```
<div style="display: block; height: 40px; width: 60px; margin-bottom: 20px;">
Top
</div>
<div style="display: block; height: 40px; width: 60px; margin-top: 40px;">
Bottom
</div>
```
示意图：

计算规则：

取边距大的，故这里的距离是40px。
两个相邻的同级元素，分别设置了底边距和顶边距，并且值分别是一负一正（正数或者0均可）

html:
html 复制代码
```
<div style="display: block; height: 40px; width: 60px; margin-bottom: -20px; border: 5px solid red;">
Top
</div>
<div style="display: block; height: 40px; width: 60px; margin-top: 40px; border: 5px solid blue">
Bottom
</div>
```
示意图：

计算规则：

正负相加，故最终距离为20px。引申：当边距中包含负数时，最终的距离等于最大的正数加上最小的负数的和。
两个相邻的同级元素，分别设置了底边距和顶边距，并且值都是负数

html:
html 复制代码
```
 <div style="display: block; height: 40px; width: 60px; margin-bottom: -10px;">
 Top
 </div>
 <div style="display: block; height: 40px; width: 60px; margin-top: -20px;">
 Bottom
 </div>
```
示意图：

计算规则：

取最小的边距，故最终的距离是-20px，可以看到下方的元素已经和上方的元素重叠一半了。
父子（嵌套）元素，且父子元素之间无任何内容间隔，如border，padding，floating元素等。

html:
css 复制代码
```
<div style="display: block; height: 40px; width: 60px; border: 1px solid red;">
</div>
<div style="display: block; height: 40px; width: 60px; margin-top: 20px">
  <div style="display: block; height: 40px;margin-top: 40px">
  </div>
</div>
```
示意图：

计算规则：

在父子元素的顶边距中取大的边距，类似上述规则，故最终的顶边距是40px。