首页 > 其他 > 详细

margin塌陷现象(即在内层设置margin-top无效的解决办法)

时间:2017-01-15 15:56:33      阅读:811      评论:0      收藏:0      [点我收藏+]

    有两个有嵌套关系的div,如果外层div的父元素的padding值为0,那么内层子div的margin-top或margin-bottom的值会转移给外层的父div,即magrin塌陷现象。

    解决办法:

      1.在父元素div上加上:overflow:hidden;

      2.把margin-top外边距改成padding-top内边距;

      3.父元素div产生边距重叠的边有不为0的padding或宽度不为0且style不为none的border;父元素添加padding-top:1px;

      4.让父元素生成一个 block formating context,以下属性可以实现
            * float: left/right
            * position: absolute
            * display: inline-block/table-cell(或其他 table 类型)
           * overflow: hidden/auto
            父层div加:position: absolute; 

margin塌陷现象(即在内层设置margin-top无效的解决办法)

原文:http://www.cnblogs.com/xinye2016/p/6287178.html

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