margin重叠现象探讨研究

margin重叠现象探讨研究

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

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

例1、HTML代码：

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

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

效果图如下：

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

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

 

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

效果图如下：

 

避免外边距重叠的方法：

1、水平边距永远不会重合。
2、在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下：
　　a、全部都为正值，取最大者；
　　b、不全是正值，则都取绝对值，然后用正值减去最大值；
　　c、没有正值，则都取绝对值，然后用0减去最大值。
注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。
3、相邻的盒模型中，如果其中的一个是浮动的（float），垂直margin不会重叠，并且浮动的盒模型和它的子元素之间也是这样。
4、设置了overflow属性的元素和它的子元素之间的margin不被重叠（overflow取值为visible除外）。
5、设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，并且和他们的子元素之间也是一样。