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

最新推荐文章于 2022-09-16 16:33:13 发布

love2016hy

最新推荐文章于 2022-09-16 16:33:13 发布

阅读量542

点赞数

分类专栏： css布局文章标签： web前端 css html5

本文链接：https://blog.csdn.net/love2016hy/article/details/72841128

版权

css布局专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先得说一下 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。
这里写图片描述