0

0

上下margin重叠传递问题

(*-*)浩

(*-*)浩

发布时间:2019-09-12 14:33:16

|

3308人浏览过

|

来源于php中文网

原创

我发现强迫症真的是我一个大病。。。每次都非得把所有情况都实验出来不可。。。but!!!!!!!!!悲催的是,这么多情况我根本记不住。。。还是要在写代码的时候不断出错再排错~受不了自己了!不过还是把这部分总结到这里啦~

上下margin重叠传递问题

下面的几个部分应该是margin重叠问题的所有情况了:

1、两个普通元素上下的margin会合并为一个margin,哪个大选哪个!

两个浮动元素不会出现margin传递的问题,依然是上面元素的margin-bottom和下面元素的margin-top相加作为两者之间的margin值。

2、两个元素如果是包含关系,父元素和子元素上下margin值也会合并(推荐学习:CSS视频教程

当父元素不加边框,不设置宽高,即父级没有触发haslayout时

IE6、7和标准浏览器下,均会发生margin传递问题子元素和父元素的高度相同(子元素的top将和父元素的top在一条直线上,bottom将和父元素的bottom在一条直线上)而父元素则选择两者之间大的数值作为父元素的margin-top值和margin-bottom值!!!

子元素的margin-left和margin-right值依然存在

当父元素不加边框,但是,设置宽或高或zoom:1;即父级加可以触发haslayout的属性时

标准浏览器下,会发生margin传递但是在IE6、7下则不会发生margin传递(即子元素的margin就是相对于父元素的,不会传递给父级)

当父级加边框,并且父级没有触发haslayout时

标准浏览器下,不会发生margin传递IE6、7下,子元素的margin彻底消失!

当父级加边框,并且父级触发haslayout(即加width或height或zoom:1)时, IE6、7和标准浏览器下,都不会发生margin传递!!!

对于IE6、7来说:

即只要触发haslayout,不管给不给父元素加边框,不管标准浏览器会不会发生margin传递,IE6、7下都不会发生margin传递!!!

而对于标准浏览器来说:

灵讯企业网站系统1.1
灵讯企业网站系统1.1

修复了搜索单选框的参数赋值问题。重写了产品展示页面中的参数传递,现在不用传参也可以直接打开产品展示页面,默认情况下显示全部产品。

下载

只有加边框才能避免margin传递!!!

给父元素添加边框,则子元素和父元素之间的margin就有分割线了,此时将不会发生合并现象了!如果给子元素添加边框两者的margin值还是没有被分开,所以依然还会发生重叠现象!

如果这里父元素里包含了多个块子元素,则每个子元素之间满足上下margin重叠,选择两者较大的margin作为两者之间的margin,第一个子元素的top和父元素重叠(左图上面白色距浏览器顶的白色区域即是),最后一个子元素的bottom和父元素重叠。IE6、7和标准浏览器显示效果均如左图。

此时,如果两个块元素是浮动元素,那么,那么就不存在子元素和父元素的margin传递情况,此时,上下的margin值则是两者之间的各自margin值相加!标准浏览器显示如下图中,IE6显示如下图右。但为什么显示有差异呢?

因为,额滴神啊!一波未平一波又起!块状元素和横向margin和浮动三者引发了IE6的新的兼容性问题——双边距bug(注意IE7没有双边距bug!!!!)

由此

实践时,首先一定要给父元素加触发haslyout的属性!这一条保证了在IE6、7下不出现margin传递问题和margin值消失问题;

然后,考虑在标准浏览器下,给子元素加浮动可以解决没有border时出现的margin传递问题,但是此时加浮动后会造成IE6的双边距bug,所以我们实践时尽量将浮动的块状元素的margin换为padding,如果实在不能换就给该元素加display:inline;!

3、两个Div(A、B)上下之间没有margin值,但是A中有子元素有margin,这时该子元素的margin值会传递到两者间,会使A、B两个元素之间填充上margin,仅限垂直方向!!!

对于这个问题,大概就是这样啦,其实也很简单,只是我把所有的情况列出来了,其实综合起来就是上面总结部分的内容。

我感觉这个margin传递和重叠都是因为两者的margin值之间没有边框或者是padding将margin这一空白区域隔开!!!!

相关专题

更多
c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

57

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

57

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

237

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

393

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

17

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

103

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

73

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

81

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

70

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号