margin重叠现象

margin重叠现象探讨研究

在网页页面布局中，经常会出现以下两种现象：

1、相邻的两个普通元素，上下边距，不是简单的相加，而是取边距较大者的元素的边距值。如例1

2、关系为父子的两个div元素，竖直方向上如果两个元素都设有margin值，则会取margin值较大的元素的边距值。如例2

例1：

HTML代码：

<div class="bro1">div1</div>
<div class="bro2">div2</div>

1. 2.

CSS代码：

<style type="text/css">
    .bro1{
        height:100px;
        background: pink;
        margin-bottom: 50px;
    }
    .bro2{
        height:100px;
        background: silver;
        margin-top:80px;
    }
</style>

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12.

效果图如下：

需要说明的是:若相邻的两个普通兄弟元素,它们的 margin 值是一样的,则两个的 margin 值就各取两个元素 margin 值的一半.

例2：

HTML代码：

<div class="far">
    <div class="son"></div>
</div>

1. 2. 3.

CSS代码：

<style type="text/css">
    .far{
        height:200px;
        background: green;
        margin-top:80px;
    }
    .son{
        height:100px;
        background: blue;
        margin-top: 50px;
    }
</style>

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12.

效果图如下：