什么是外边距合并？

• 外边距合并指的是：在垂直方向上，当两个元素的外边距相遇时，它们将形成一个外边距。合并后的外边距的值取两者中较大的那一个。

图解示例：

并列关系(两者为兄弟元素时)

嵌套关系(两者为父子元素时)

如何解决外边距合并问题

并列关系

• 给其中一个元素设置外边距即可

嵌套关系

• 给父元素设置溢出隐藏

.father{
    overflow:hidden;
}

• 给父元素设置透明边框

.father{
    border: 1px solid transparent;
}

• 给父元素或子元素设置绝对定位

.children{
    position: absolute;
}

• 给父元素或子元素设置浮动

.children{
    float: left;
}