外边距塌陷

外边距的设计初衷是为了解决段落之间垂直方向的空隙

什么时候会发生塌陷

1. 发生在垂直方向而不是水平方向
2. 块级元素，不是行内元素，也不是行内块元素

外边距计算

1. 外边距如果两个都是正数，则取最大的数
2. 外边距如果两个都是负数，则取绝对值最大的数
3. 外边距如果一个是正数一个是负数，则取相加的和

总结如下表格：

外边距1	外边距2	结果
正数	正数	最大的数
负数	负数	绝对值最大的数
正数	负数	想加的和

外边距塌陷的作用

1. 使两个块级元素顶端对齐
2. 使一个块级元素可以垂直居中于另一个块级元素

解决塌陷方案

1. 绝对定位：父元素添加position: relative;，子元素使用top: 20px;
2. 相对定位：同绝对定位
3. 行内块元素：将元素设置为display:inline-block;
4. 浮动：设置float:left;，然后设置margin的值
5. BFC：为父元素添加overflow: hidden;，子元素使用margin
6. 内边距：使用padding
7. 边框：父元素顶部添加border-top: 1px solid transparent;