这篇文章接着之前的BFC,讲一下margin的两个经典bug
一、margin塌陷
先看一段代码
html代码:
<div class="wrapper">
<div class="content"></div>
</div>
css代码:
.wrapper{
width: 100px;
height: 100px;
background-color: black;
margin-left: 100px;
margin-top: 100px;
}
.content{
width: 50px;
height: 50px;
background-color: green;
margin-left: 50px;
**margin-top: 50px;**
}
得到的结果是
从图中可以看出我们明明为小绿方块设置了margin-top:50px,但是这个效果并没有达到我们所要的效果,这就是所谓的margin塌陷,当为里边的小绿盒子设置margin-top:150px时,两个盒子会一起向下移动。
总结:当两个盒子嵌套时,且两个盒子都设置了margin,则垂直方向上的margin按最大值计算。
解决办法:(1) 为外部的盒子加一个border:1px solid black; (这种方法不符合开发要求)
(2) 触发盒子的BFC属性,让父元素变为BFC元素
二、margin合并
接着看代码
HTML代码:
<span class="box1">123</span>
<span class="box2">456</span>
CSS代码:
.box1{
background-color: red;
margin-right: 200px;
}
.box2{
background-color:green;
margin-left: 100px;
}
效果
这种情况属于正常情况,正常情况下,两个盒子的margin不会发生重叠。
但是对于div来说,两个盒子的垂直方向的margin会发生重叠,接下来再看一段代码
HTML:
<div class="box1">123</div>
<div class="box2">456</div>
CSS:
.box1{
background-color: red;
margin-bottom: 200px;
}
.box2{
background-color:green;
margin-top: 100px;
}
```
效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190116100823520.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cGVyeXVhbjU2Nw==,size_16,color_FFFFFF,t_70)
从效果可以看出,两个盒子的垂直方向的margin取最大值。
一般来说,这种bug可以通过给两个盒子中的一个加一个父元素,父元素设置BFC属性即可解决,但是,在开发中,这种bug并不影响我们正常使用,通过计算两个盒子的margin,为一个盒子设置margin值即可。