CSS margin重叠的问题

CSS margin重叠的原因可以归结为CSS规范中定义的边距合并规则。这些规则是为了简化布局并提供一致的行为。边距重叠的主要原因是为了处理相邻元素之间的空隙。 简单来说margin的定义不是让元素移动多少px，而是这个元素的旁边必须有多少px的空隙。

1. 垂直方向的重叠

<style>
    .top {
        width: 500px;
        height: 100px;
        margin-bottom: 100px;
        background-color: pink;
    }
    .bottom {
        width: 100px;
        height: 100px;
        margin-top: 80px;
        background-color: blue;
        float: left;
    }

</style>
<div class="top"></div>
<div class="bottom"></div>

解决办法：

1. 顶部元素修改 display: inline-block;
2. 底部元素设置为 浮动。
3. 底部元素的position：absolute/fixed。

2. 父子级的重叠

代码示例：

<style>
    .parent {
        height: 500px;
        background-color: pink;
        margin-top: 50px;
    }
    .child {
        width: 100px;
        height: 100px;
        background-color: blue;
        margin-top: 100px;
    }

</style>

<div class="parent">
    <div class="child"></div>
</div>

解决办法：

1. 给父元素添加 overflow: auto 或者 overflow: hidden属性。
2. 给父元素添加 边框、内边距或清除浮动。
3. 给子元素添加 position: absolute。
4. 给子元素添加 float 或者 display: inline-block;
5. 可以用padding代替 margin。

参考资料:
CSS外边距(margin)重叠及防止方法