首页 > 其他 > 详细

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

时间:2020-07-05 19:44:32      阅读:45      评论:0      收藏:0      [点我收藏+]

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

 

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

    解决 :


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


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


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

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

    

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


    



 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

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

原文:https://www.cnblogs.com/ximenchuifa/p/13247961.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!