首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

什么是外边距合并？外边距合并的结果是什么？如何解决外边距的塌陷？

作者：l彡id夏日阳光 | 来源：互联网 | 2023-10-13 16:01
也称为外边距的重叠（margincollapse）两个相邻盒子（可以是兄弟关系，也可以是祖先关系），合并为一个外边距，称为外边距重叠。兄弟关系计算规则：两个外边距都是正数，重叠结果

也称为外边距的重叠（margin collapse）

两个相邻盒子（可以是兄弟关系，也可以是祖先关系），合并为一个外边距，称为外边距重叠。

 

===============================================兄弟关系======================================

　　计算规则：

　　　　两个外边距都是正数，重叠结果是两者较大的

　　　　






    

    



    

    



==============运行效果=================

技术分享图片

 

 



　　　　两个外边距都是负数，重叠结果是两者绝对值较大的






    

    



    

    



==============运行效果=================

技术分享图片

 

 



　　　　两个外边距一正一负，重叠结果两者之和，如果和为正，两个盒子保持一定距离，如果和为负，两个盒子重叠。

　　　　　　a.结果为正的情况：

　　　　　　






    

    

    

    

    



    

    



==============运行效果=================

技术分享图片

 

 　　　　b.结果为负的情况：






    

    



    

    



==============运行效果=================

技术分享图片

 

 

 

 

===============================================父子关系======================================

a.都是正值的情况






    

    



    

    

        

    



====================运行结果=======================

技术分享图片

 

 b.都是负值的情况






    

    



    

    

        

    



====================运行结果=======================

技术分享图片

 

 c.父级是正值，子级是负值，且和为正值






    

    



    

    

        

    



====================运行结果=======================

技术分享图片

 

  d.父级是负值，子级是正值，且和为负值






    

    



    

    

        

    



 

===============================如何解决外边距的塌陷================================

当子级设置margin-top时，父级也会随着子级设置的margin-top下沉






    

    

    

    

    



    

        

    



 

解决方法一，给父级设置padding-top,并且如果保持高度不变，height需要减去50px：

　　
 　　#father {

            width: 400px;

            height: 350px;

            background-color: #f00;

　　　 padding-top:50px;

        }


解决方法二，给父级div放一个padding进去，同时调整父级的height，以及子级的margin-top

height + padding-top = 原来的height;

padding-top + margin-top = 父级与子级之间需要的距离；

　　
　　#father {

            width: 400px;

            height: 399px;

            background-color: #f00;

　　　 padding-top:1px;

        }

　　
 　　#son {

            width: 200px;

            height: 200px;

            background-color: #0f0;

            margin-top: 49px;

        }

解决方法三，给父级div放一个border进去,并且将border的颜色设置成与父级div的背景颜色相同，起到迷惑作用

　　
　　#father {

            width: 400px;

            height: 399px;

            background-color: #f00;

　　　   border-top: 1px solid #f00;

        }

　　
　　#son {

            width: 200px;

            height: 200px;

            background-color: #0f0;

            margin-top: 49px;

　　}

解决方法四，给父级div增加overflow: hidden

　　
　　#father {

            width: 400px;

            height: 400px;

            background-color: #f00;

　　　   overflow: hidden;

        }

　　
　　#son {

            width: 200px;

            height: 200px;

            background-color: #0f0;

            margin-top: 50px;

　　}




















推荐阅读
author-avatar
l彡id夏日阳光
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有