CSS2系列:外边距合并问题(margincollapse)_html/css_WEB-ITnose
程序员文章站
2022-06-13 23:30:06
...
外边距合并
当两个垂直方向外边距相遇,它们将形成一个折叠外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
为了好认识,我们称内部div为"盒子",包含这个内部div的外部div为"包含体"
解释
- 盒子margintop和包含体margintop取出最终折叠外边距值。下面为取这个值的情况 150 50=150 150 -50=100 -150 -50 =-150 -150 50 =-100
- 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。可以在下面例子2中,改变一下
- 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时,折叠结果是两者的相加的和。
- 包含关系时,盒子不显示margin-top(相当没有margin-top),包含体显示margin-top这个最终值。
- 兄弟关系时,两兄弟之间的margin共用这个最终值。
极限情况一个元素
例子1包含关系,不设置外层div的内边距(补白)和边框的前提!
例子2兄弟关系
* {margin:0; padding:0;border:0;}#d1 {width:100px;height:100px;margin-top:50px;margin-bottom:50px;background-color:red;}/*改变margin-bottom:-50px;试一试*/#d2 {width:100px;height:100px;margin-top:10px;background-color:blue;}
例子3本身合并``它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:
* {margin:0; padding:0;border:0;}#d1{border: 1px solid red;width: 200px;}#d2 {height:0px;min-height:0px;margin-top:50px;margin-bottom:150px;}/*border: 1px solid red;试一试将这个盒子边框加上,是不是还能合并。答案不能!*/
从图中可以看到这个红色边框包裹的高度是150px,不是200px。包含体本身木有高度,随着盒子的最后得到的折叠margin自动撑开。
例子3调试注意
但是在浏览器调试的时候,监视盒子的时候,并不是给我们显示折叠margin值。而是显示这个盒子的设定值。这点不要影响,最终的折叠margin值的肯定。
例子3Question!!求答案,想了一下午。
减轻上面的影响请试一试一下代码
* {margin:0; padding:0;border:0;}#d2 {height:0px;min-height:0px;margin-top:50px;margin-bottom:150px;}
从上面注意我们知道:调试的时候选中这个元素,显示200px是正常的,但是这个元素距离浏览器上面100px,这个我真不能理解。
不能产生折叠边距的情况
推荐阅读
-
关于HTML中父子级外边距合并的问题
-
CSS2系列:外边距合并问题(margincollapse)_html/css_WEB-ITnose
-
[转]如何解决外边距margin叠加的问题探讨_html/css_WEB-ITnose
-
CSS2系列:外边距合并问题(margincollapse)_html/css_WEB-ITnose
-
margin外边距合并详解_html/css_WEB-ITnose
-
外边距合并_html/css_WEB-ITnose
-
CSS 外边距合并_html/css_WEB-ITnose
-
margin外边距合并详解_html/css_WEB-ITnose
-
深入理解BFC和外边距合并(Margin Collapse)_html/css_WEB-ITnose
-
CSS 外边距合并_html/css_WEB-ITnose