在‘逆战班’写网页布局时,经常使用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上下重叠问题的几种解决办法,具体还需根据实际情况来使用。