div外边距重合问题及解决方法

例如：

    <div class="box1">
        <p>这是一段文本</p>
    </div>
    <div class="box2">
        <p>这是另一段文本</p>
    </div>
    

    .box1{
        margin-bottom: 10px;
    }
    .box2{
        margin-top: 20px;
    }

则box2与box1的边距不是20px+10px=30px，而是20px。

解决方法一：使用padding

一种解决方法是使用padding代替margin，将外边距变成内边距。这样相邻的两个元素就不再受到外边距合并的影响了。

    <div class="box1">
        <p>这是一段文本</p>
    </div>
    <div class="box2">
        <p>这是另一段文本</p>
    </div>
    

    .box1{
        padding-bottom: 10px;
    }
    .box2{
        padding-top: 20px;
    }

解决方法二：使用border

另一种解决方法是使用border代替margin，即给相邻的两个元素添加1像素的border，然后再将border设置为透明。

    <div class="box1">
        <p>这是一段文本</p>
    </div>
    <div class="box2">
        <p>这是另一段文本</p>
    </div>
    

    .box1{
        border-bottom: 1px solid transparent;
        margin-bottom: 10px;
    }
    .box2{
        border-top: 1px solid transparent;
        margin-top: 20px;
    }

解决方法三：使用clear

最后一种解决方法是使用clear属性清除浮动。具体做法是在相邻的两个元素中，将一个元素的clear设置为left，另一个元素的float设置为left。

    <div class="box1">
        <p>这是一段文本</p>
    </div>
    <div class="box2">
        <p>这是另一段文本</p>
    </div>
    

    .box1{
        float: left;
        margin-bottom: 10px;
    }
    .box2{
        clear: left;
        float: left;
        margin-top: 20px;
    }

总结