margin合并

2018-10-13  本文已影响0人  阿龙哟

以前学上下方向上margin会合并,就是单纯的知道,margin塌陷了,要形成BFC overflow:hidden 就好了,今天重新认识一下

margin合并现象

 body{border:5px solid #000;}
 .dad{outline:5px solid green;  }
 .son{border:5px solid red;padding:10px;margin:10px;}

<div class="dad">
  <div class="son"></div>
</div>
image.png

黑线:body 绿线:dad 红线:son

从图中可以看到,明明是son的margin,但是效果只要左右生效了,而上下margin作用到了dad上,很奇怪

怎么解决呢:
1.父级元素加一个border,有人会说不是已经加了border么,是绿色的
不不不,那是outline 和border是有区别的,outline不占高度,所以把outline改为border看看:

body{border:5px solid #000;}
.dad{border:5px solid green;}  
.son{border:5px solid red;padding:10px;margin:10px;}
image.png

成功作用到了son上面

2.dad加一个padding,同样也会生效

      body{border:10px solid #000;}
      .dad{outline:5px solid green;padding:1px;}
     .son{border:5px solid red;padding:10px;margin:10px;}
image.png

3.利用overflow-hidden,同样会生效

      body{border:10px solid #000;}
      .dad{outline:5px solid green;overflow:hidden;margin:10px;}
     .son{border:5px solid red;padding:10px;margin:10px;}
image.png

总结:margin塌陷原因我们不了解,但是需要知道怎么去解决
方法的核心思想就是让两个div的margin隔开,不要直接接触
border,padding都是将两个margin隔开了
而overflow:hidden 形成了一个BFC完全隔断了空间,内部与外部当然不影响

注意:不推荐overflow:hidden 方法,小白做法,清除浮动也是overflow:hidden,如果有一个mask在外面,全完蛋。

上一篇 下一篇

猜你喜欢

热点阅读