margin 合并/折叠

margin 合并：块级元素的上外边距或下外边距有时（直接接触/相邻时）会合并为一个外边距

合并原则：正正取最大，负负取最负，正负就相加

父子 margin 合并

解决办法：

1. 父元素加 border

2. 父元素添加 padding 来代替子元素的 margin

3. 把父元素设置为 BFC

4. 父元素加 height、min-height、max-height(适用于最后一个子元素的 margin 合并)

兄弟 margin 合并

解决办法：

1. 用 padding 代替 margin

空元素进行 margin 合并

//html
<p>aaaaaaaa</p>
<div class="test"></div>
<p>bbbbbbbb</p>


//css
.test{
    margin: 10px 0 20px 0;
}

此时第一个 p 元素和第二个 p 元素之间的间距是 20px。

解决方法

1. 设置垂直方向的 border；

2. 设置垂直方向的 padding；

3. 里面添加内联元素（直接 Space 键空格是没用的）；

4. 设置 height 或者 min-height。

margin 塌陷

在文档流中，父元素的高度默认是被子元素撑开的

也就是说 子元素有多高，父元素就有多高

但是当子元素设置浮动之后，子元素会完全脱离文档流

此时将会导致子元素无法撑开父元素的高度，导致父元素高度塌陷

解决方案：

1. 把父元素设置为 BFC

2. 给父级元素添加一个边框，就可以解决；如果不希望看到边框，可以将边框的颜色设成背景色即可。