Margin塌陷:
正常情况:
如上所示:.wrap设置了margin-left就相对与他的父级元素向右移动了100px;
.box设置了margin-left就相对与他的父级元素(.wrap)向右也移动了100px
但是:如果在垂直方向设置margin-top,或者margin-bottom就会跑bug(如下代码和现象)
由上面代码我们可以知道:.wrap设置了margin-top后,就相对于他的父级向下移动了100px;
而.box设置了margin-top后,并没有相对于他的父级(.wrap)向下移动了100px;
下面改变.wrap 和 .box 的margin-top大小来看一下跟明显的现象:
改变1:
改变2:
由改变2知道:子级元素.box改变了margin-top,使得比父级(.wrap)的margin-top还要大。这样.box就带动了.wrap一起向下移动,就好像.wrap的上顶不见了一样,我们称这个bug为margin塌陷。
解决方法:触发BFC
1),display: inline-block;
2),position: absolute;
3),overflow: hidden;
4),float: left;/right;
上面四个方法都可以来弥补这个bug带来的开发缺陷,根据自己开发需要选择使用。
Margin合并:
正常情况:
.box1 和 .box2 会因为margin-right ,margin-left隔开一段距离(两者像素和)
但是下面情况就会出现bug
case1:
case 2:
case 3:
对比 case 1 和case 2得:case 2的.demo2加了margin-top:100px;后,
并没有使.demo1和.demo2的上下距离拉大,而是没有变化。
对比 case 2 和case 3得:case 3 改变了两个.demo的margin-top/margin-bottom的像素值,但是.demo1和.demo2的上下距离也就只有300px
当两个同级的div要通过margin-top/margin-bottom隔开一段距离时,隔开的距离不会是两者
margin-top和margin-bottom的像素值之和,而是两个像素之间的最大值,这就是margin合并。
可以通过上面的触发BFC来解决;但是在实际开发中,一般是如果两个div要上下相隔500px的话,就设置上面的div的margin-bottom:500px;来解决这个问题。