外边距塌陷(外边距合并)

  1.父子块级 元素外边距塌陷

 

　　子元素加margin­top,父元素也加margin­top, 如果父元素没有设置margin­top,那默认0,取的是其中最大
　   的值,这个效果作用父元素身上啦 , 原因 :他俩共用一个外边距 .
　　

　   解决 :

　　方法一 : 给父元素加 border/padding 

　　方法二: 给父元素加overflow:hidden , (触发BFC,它是一块独立的渲染区,不受子元素的影响)

　 2. 相邻块元素垂直外边距的塌陷

　　给上盒子加margin­bottom,给下面盒子加margin­top, 就会出现外边距塌陷,原因:它俩共用一个外边距 ,取的是他俩之间最大的值

　　　　

　　　解决 : 给任意一个盒子加父元素, 给父元素设置 : overflow:hidden