overflow: hidden;解决外边距塌陷

overflow: hidden;解决外边距塌陷

http://img1.sycdn.imooc.com//climg/5df5cd1309d2b09b19201048.jpg

我这里将overflow: hidden删除,为什么没有任何变化,不是说会有外边距塌陷的问题吗?

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,是有的,同学可以检查下元素看下:

由于sub-inner-box里面的内容设置了margin,父元素在没有设置padding-top或者border的时候,也会跟随子元素一起跑下来。

http://img1.sycdn.imooc.com//climg/5df5d37e09973b1405010078.jpg

子元素设置上间距往下移动,父元素也跟随往下移动,下面就会超出一点:

http://img1.sycdn.imooc.com//climg/5df5d37f0915005610670510.jpg

所以overflow: hidden就是为了解决这个问题,当设置之后,父元素就不会跟随往下移动:

http://img1.sycdn.imooc.com//climg/5df5d391098cf7af10900514.jpg

overflow: hidden;解决外边距塌陷,遇到的比较少,特殊记一下就行。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 迷失的小麦 提问者 #1
    为什么我测试的时候没有变化,难道说是浏览器的问题?
    2019-12-15 15:39:30
  • 好帮手慕粉 回复 提问者 迷失的小麦 #2
    同学你好,是因为最外层的盒子main也设置了overflow:hidden,所以即便溢出了同学也看不到,同学把main的溢出隐藏去掉就可以看出来了。这是一种良好的代码书写习惯,为了避免对后面的布局造成影响,先添加溢出隐藏。如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
    2019-12-15 17:46:34
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师