margin的上下重叠bug
- 两个同辈元素上下排列,给上元素设置下margin,给下元素设置上margin,那么两个元素的距离取两个margin值中最大的那个值,又叫margin的重叠现象
- 父子元素,子元素的margin-top会错误的传递给父元素,子元素在父元素内看不到margin-top的设置
需要注意的是,margin重叠只发生在块状元素,且具有垂直相邻的关系才会发生重叠。margin重叠时,两个元素中margin较小的那个值会被较大的值给覆盖。在逆战班的学习过程中学习到margin重叠不会对边界内的padding和border起作用。
解决方法
1.同辈元素之间:如果上边元素不浮动,下边元素浮动,可以通过给上边元素添加浮动属性来解决margin上下重叠问题。
以下例子中,未给box2添加浮动时,二者的间距会以margin值大的显示,即会显示100px的间距,图左所示。添加浮动后,二者间距以margin之和显示,即显示间距为150px的效果,图右所示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:200px;
height:100px;
}
.box1{
background:#0f0;
margin-bottom:100px;
}
.box2{
background:#00f;
margin-top:50px;
/*float:left;*/
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
需要注意的是,由于box2浮动了,如果box2下面还有别的元素,此时需要对box2下面的元素使用clear:both属性来消除影响。
2.同辈元素之间:如果上边元素浮动,下边元素不浮动时,此时需要先对下边元素使用clear:both消除影响并添加浮动属性即可。如下例中,左图为未处理效果,浮动的box1会盖在不浮动的box2上,对box2清除浮动影响并添加浮动属性后如图右显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:200px;
height:100px;
}
.box1{
background:#0f0;
margin-bottom:100px;
float: left;
}
.box2{
height: 200px;
background:#00f;
margin-top:50px;
/*clear: both;
float:left;*/
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
3.父元素与子元素:可以通过给父元素添加overflow:hidden属性来解决。
下例中,未进行处理时,子元素紧贴父元素顶部,当对子元素设置margin-top:50px时,父子元素之间的相对位置并未改变,反而在父元素顶部错误出现了50px的间距,如下图左,对父元素添加overflow:hidden属性后显示如图右所示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.father{
width:200px;
height:200px;
background: #f00;
/*overflow: hidden;*/
}
.son{
width:100px;
height:100px;
background: #00f;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">我是子元素</div>
</div>
</body>
</html>
上面简单叙述页面布局时margin出现的上下重叠bug的解决方法,仅供参考。