1、什么是margin塌陷(只发生在垂直方向)
- 同级元素塌陷:两盒子之间的margin出现了重叠部分,垂直之间塌陷的原则是以两盒子最大的外边距为准。
- 父子元素塌陷:父子元素之间也会出现margin塌陷,
Ⅰ、父元素和子元素都设置了同方向的margin-top值,两个属性之间没有其他内容进行隔离,导致两个属性相遇,发生margin塌陷。
Ⅱ、本身父元素与上一个元素的距离是0,子元素如果设置了垂直方向的上边距,会带着父级元素一起掉下来。
原文:https://www.jianshu.com/p/85590424958c
2、margin塌陷解决办法
为了避免margin坍塌现象,就要通过各种方式触发BFC。
触发BFC的几种方式:
- overflow:hidden/auto/scroll;
- position不是static也不是relative;
- float不是none;
- display是table-cell或inline.
原文:https://www.imooc.com/qadetail/176054?t=258376
补充:https://www.cnblogs.com/hugejinfan/p/5901320.html