子元素的垂直margin值对父元素的影响

来源:转载

首先得说一下 margin折叠
所谓margin折叠,即相邻的不同margin值有可能会被折叠成同一个margin值。看清楚哦,只是有可能会。至于哪些是相邻元素?哪些又会存在折叠?
这个链接https://blog.coding.net/blog/css-margin里阐述很全面。

这里只分析子元素的垂直margin值对父元素的影响
(HTML结构:灰色父块,红色子块,绿色子块,白色父块,黄色子块。两父块相邻)

第一种情况:父块 没有padding、没有border边框时

HTML结构

<body> <div class="parent"> <div class="son1"></div> <div class="son2"></div> </div> <div class="parent2"> <div class="son3"></div> </div></body>

CSS样式

<style type="text/css"> body{ background:#CF9; } body,div{ margin:0;padding:0; } .parent{ background:#ccc; width:400px; margin-left:10px; } .parent2{ background:#eee; width:400px; margin-left:100px; } .son1{ background:red; height:50px; opacity:0.5; width:50%; margin-left:10px; margin-top:20px; } .son2{ background:green; opacity:0.5; width:50%; height:50px; margin-top:20px; margin-left:10px; margin-bottom:-20px; } .son3{ height:100px; background:#CF3; width:50%; margin-left:100px; } </style>

浏览器显示结果如下:
(黄绿色为body部分,灰色为第一个div父块,红色和绿色为div子块,白色为下一个div父块)
红色子块设置了margin-top值为20px,而灰色父块设置的margin-top值为0px,
绿色子块设置margin-bottom值为-20px,灰色父块设置margin-bottom值为0px。

此时父块没有padding、没有border边框
结果是灰色父块受到了影响,它实际的margin-top值变为20px,margin-bottom值变为-20px
此时第二个父块(白色父块)也受相邻灰色父块影响,margin值发生折叠,因此白色父块的margin-top变成了-20px,因此会覆盖掉灰色父块的20像素的高度。
(不明白的请查看上面链接中的“折叠后的margin大小”)

当绿色子块margin-bottom值为+20px时结果如下:

同理第一个父块受到了影响,它的margin-bottom值变为20px,而第二个父块的margin-top值也变为+20px

第二种情况:第一父块 padding:1px;
CSS样式增加一行代码
.parent{padding:1px;}

浏览器显示如下:
红色子块设置了margin-top值为20px,而灰色父块设置的margin-top值为0px,
绿色子块设置margin-bottom值为-20px,灰色父块设置margin-bottom值为0px。

此时灰色父块的margin-top值不会再受红色子块的影响。灰色父块的margin-bottom值也不受绿色子块的影响,即它的margin-top和margin-bottom值仍然为0px,
但是因为绿色子块的margin-bottom值为-20px,因此相邻的父块底边界会上移,绿色子块溢出,采用overflow:hidden可以隐藏溢出部分。
白色父块margin-top值也仍然为0px,和第一父块相接。

绿色子块margin-bottom值为+20px时结果如下:
灰色父块的margin-top不会再受红色子块的影响。灰色父块的margin-bottom也不受绿色子块的影响,
即它的margin-top和margin-bottom值仍然为0px,

第三种情况:border:1px solid black;
第一种情况基础上的CSS样式增加一行代码
.parent{border:1px solid black;}
浏览器效果与第二种情况相同,只是多了边框,道理基本相同
红色子块设置了margin-top值为20px,而灰色父块设置的margin-top值为0px,
绿色子块设置margin-bottom值为-20px,灰色父块设置margin-bottom值为0px。

绿色子块设置margin-bottom值为+20px

分享给朋友:
您可能感兴趣的文章:
随机阅读: