在‘逆战班’写网页布局时，经常使用margin来调整栏目和对象之间的间距，在使用过程中会发现margin值会出现重叠现象，影响页面的布局效果，简单的概括就是：
- margin重叠只发生在块状元素，且具有垂直相邻的关系才会发生重叠。
- margin重叠时，两个元素中margin较小的那个值会被较大的值给覆盖。
- margin重叠不会对边界内的padding和border起作用。
下面就结合几个示例进行margin上下重叠问题的解决；
1.当一个元素包含另一个元素时（父元素与子元素）：通过给父元素添加overflow：hidden属性来解决。
【例】初始状态时，子元素紧贴父元素顶部，当对子元素设置margin-top：50px时，元素之间的位置并未改变，反而在父元素顶部出现了50px的间距，如下图左
<style>
div{
width:200px;
height:200px;
}
.box1{
background:#f00;/*overflow:hidden;*/
}
</style>
<body>
<div class="box1">
<div class="content">子元素</div>
</div>
</body>
 |
 |
|---|---|
通过对box1添加overflow：hidden属性，如上图右，解决了子元素的margin-top值越过父元素边界的情况。
2.上边元素不浮动，下边元素浮动。通过给上边元素添加浮动属性来解决margin上下重叠问题。
【例】分别给上面元素添加margin-bottom：100px，下面的元素添加margin-top：50px的属性，发现两者之间的上下间距只有100px，不是需要的150px，如下图左，
<style>
div{
width:200px;
height:100px;
}
.box1{
background:#f00;
margin-bottom:100px;
}
.box2{
background:#0f0;
margin-top:50px;
/*float:left;*/
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
 |
 |
|---|---|
对box2，添加float：left或right属性后，如上图右，margin上下重叠的问题就解决了。需要注意的是，由于box2浮动了，如果box2下面还有别的元素，此时需要对box2下面的元素使用clear：both属性来消除影响。
3.上边元素浮动，下边元素不浮动时，此时需要先对下边元素使用clear：both消除影响并添加浮动属性即可。
【例】上边元素由于浮动，盖住了下边的元素一部分，如下图左。在对下边元素添加了clear：both属性清除浮动影响后，出现了margin上下重叠的现象，如下图中，最后对下边元素添加浮动属性之后，变成了我们希望的布局。
<style>
div{
width:200px;
height:100px;
}
.box1{
background:#f00;
margin-bottom:100px;
float: left;
}
.box2{
height: 200px;
background:#0f0;
margin-top:50px;
/* clear: both;
float: left; */
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
|
| 
| 
|
以上就是对margin上下重叠问题的几种解决办法，具体还需根据实际情况来使用。
