margin合并问题简洁思考

margin合并问题

margin合并: 设置的margin并没有生效,或没有按照预想的结果出现

出现的地方:

• 兄弟元素
• 父级元素与第一个和最后一个子元素

一.兄弟元素

html:

    <div class="bro1"></div>
    <div class="bro2"></div>

css

.bro1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-bottom: 30px;  //❤
}
.bro2 {
    width: 100px;
    height: 100px;
    background-color: black;
    margin-top: 60px;   //❤
}

按照思维:应该是 bro1的30+bro2的60 = 90 才对,实际上 显示的只是 60px(浏览器会选择最大的那个)

这个就是一种margin合并问题

如果在 bro1 设置浮动 , 给bro2设置清除浮动,这个时候 br02无论 margin-top 无论设置的多大,浏览器都只会 按照bro1 的margin-bottom来

二.子父级之间

**出现的问题:**给子级(第一个或最后一个) 设置margin,子元素并没有 参照父级,自己在父级内部进行margin的调整,而是带着父级,一起"下落"了

html

<div class="father">
    <div class="son"></div>
</div>

css

.father {
    height: 100px;
    width: 100px;
    background-color: aqua;
}
.son {
    height: 50px;
    width: 50px;
    background-color: violet;
    margin-top: 20px;	//❤
}

当然也能消除掉合并问题:

方法:

激发BFC