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.
 
 

效果图如下：