浅谈CSS外边距重叠

这桌有如下几道菜，喜欢请拿走哟。

1、重叠发生的机制
2、border和padding如何阻止了重叠
3、重叠解决方案

 

**重叠发生的常见情况**
1.元素互为相邻关系
2.元素互为包含关系(父子关系)

**重叠发生的机制**
无论是相邻关系还是包含关系，重叠发生依赖于两个元素的margin能够相互接触到！！相互触碰到！相互摩擦！

**相邻关系**

<div class="man" style="width:400px;height:100px;background:red;margin-bottom:100px;"></div>
<div class="brother" style="width:400px;height:50px;background:#af3;margin-top:50px;"></div>

如果添加border或者padding还会发生重叠吗？答案是肯定的。

<div class="man" style="width:400px;height:100px;background:red;margin-bottom:100px;border-style:solid;"></div>
<div class="brother" style="width:400px;height:50px;background:#af3;margin-top:50px;border-style:solid;"></div>

不论如何设置padding或者border，对于相邻元素来说，它们的margin都能互相接触！！！！！所以会发生重叠。

**包含关系**

<div style="width:400px;height:400px;background-color:blue;">
<div style="width:200px;height:200px;margin-top:100px;background-color:red;"></div>
</div>

注意，这时候border，padding都是0.父元素的margin和子元素的margin能够相互接触到。

如果给父元素加个padding或者border，那么子元素的margin就无法接触到父元素的margin了。因此也无法发生重叠了！这里以border为例。

<div style="width:400px;height:400px;background-color:blue;border-style:solid;">
<div style="width:200px;height:200px;margin-top:100px;background-color:red;"></div>
</div>

如果给子元素添加border或者padding是不起作用的。

**外边距重叠的解决方式**
1.创建BFC(BFC是个坑，以后再聊吧)
2.避免margin的亲密接触。

 

转载于:https://www.cnblogs.com/gsly/p/5136835.html