外边距塌陷解析-优快云博客

外边距重叠

1.什么是外边距塌陷问题

查看以下场景：

<div></div>
<div></div>

<style>
div:nth-child(1) {
    width: 100px;
    height: 100px;
    background-color: #909090;
    margin-bottom: 100px;
}

div:nth-child(2) {
    width: 200px;
    height: 200px;
    background-color: #008989;
    margin-top: 100px;
}

</style>

定义了两个div盒子分别给上下两个div设置了margin-bottom:100px，margin-top:100px，但是两个div盒子之间的距离只有100px而不是我们所想要的200px，此时两个div盒子的外边距发生了重叠，而此场景便称为外边距塌陷问题，也称为外边距重叠。

2.外边距重叠（外边距塌陷）

两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距，不过只有上下外边距才会有塌陷，左右外边距不会出现这种问题。

那为何要这样设计呢？外边距重叠的设计初衷是为了解决段落之间垂直方向的空隙。当对多个p标签同时设置margin-top以及margin-bottom的时候，如果不采取外边距重叠的方式，那么呈现出来的场景便是：中间几个p标签的间距很大，边缘p标签与其他标签的间距很小的情况产生，使得外观不整洁。因此还需要对其个别的元素设置不同的margin值，显然很麻烦。所以采取外边距重叠的方式，使得只采用其中一个元素的外边距，使得显示更美观。对于这些场景，外边距重叠显示是适用的。但是副作用仍然是存在的。

3.外边距重叠出现条件

垂直方向，不是水平方向
块级元素，不是行内元素，也不是行内块级元素。原因：行内元素不能设置垂直方向的外边距。

4.外边距计算

假设一个元素外边距margin-bottom和另一个外边距margin-top分别是以下的值，那么最终外边距的值为：

正数 && 正数取最大的数
负数 && 负数取两个数中绝对值最大的数
正数 && 负数取两个数相加的和

5.出现场景

1.相邻关系

<div></div>
<div></div>

<style>
div:nth-child(1) {
    width: 100px;
    height: 100px;
    background-color: #909090;
    margin-bottom: -100px;
}

div:nth-child(2) {
    width: 200px;
    height: 200px;
    background-color: #008989;
    margin-top: 100px;
}
</style>

一个元素的margin-bottom:-100px，另一个元素的margin-top:100px，因此两者之间的间距为0px

应用：元素居中设置

<div></div>
<div></div>

<style>
div:nth-child(1) {
    width: 200px;
    height: 200px;
    background-color: #909090;
    margin-bottom: 50px;
}

div:nth-child(2) {
    width: 100px;
    height: 100px;
    background-color: #e7dec6;
    margin-top: -200px;
}
</style>

-200px + 50px = -150px，因此第二个元素总体向上移动150px，位于第一个盒子正中央的位置。

2.父子关系

<div class="box1"></div>
<div class="box2">
    <div class="child">子元素</div>
</div>`

<style>
:root {
    text-align: center;
}

.box1 {
    width: 100px;
    height: 100px;
    background-color: red;
}

.box2 {
    width: 100px;
    height: 100px;
    background-color: #eae2dc;
    margin-top: 20px;
}

.child {
    width: 100px;
    height: 20px;
    background-color: #d39c90;
    margin-top: 10px;
}
</style>

有三个div盒子，其中想给父盒子box2添加margin-top使得与box1产生一定的距离，同时也想给子元素child添加margin-top，使得子元素与父元素box2上边线产生一定的距离，但是由于子元素与父元素处于同一普通流上，因此给父元素与子元素添加上边距的时候，会出现上边距重叠的情况，因此子元素与父元素同时与box1向下移动max(20px,10px),也即20px距离

6.解决外边距重叠

绝对定位（适合于父子关系）

对父元素添加相对定位（相对于原来位置的定位），使父元素位置不会随着子元素流移动，因此此时子元素可以添加绝对定位：absolute（相对于父元素的位置）让其在父元素中移动而不会影响父元素。

<div class="box1"></div>
<div class="box2">
    <div class="child">子元素</div>
</div>`

<style>
:root {
    text-align: center;
}

.box1 {
    width: 100px;
    height: 100px;
    background-color: red;
}

.box2 {
    width: 100px;
    height: 100px;
    background-color: #eae2dc;
    margin-top: 20px;
    position: relative; 
}

.child {
    width: 100px;
    height: 20px;
    background-color: #d39c90;
    margin-top: 10px;
    position: absolute; // 必须写此项，否则无法在父元素中移动
}
</style>

行内块级元素（适合于相邻以及父子关系）

由于行内块级元素不会触发外边距重叠，因此可以对子元素设置为行内块级元素

<div class="box1"></div>
<div class="box2">
    <div class="child">子元素</div>
</div>`

<style>
:root {
    text-align: center;
}

.box1 {
    width: 100px;
    height: 100px;
    background-color: red;
}

.box2 {
    width: 100px;
    height: 100px;
    background-color: #eae2dc;
    margin-top: 20px;
}

.child {
    width: 100px;
    height: 20px;
    background-color: #d39c90;
    margin-top: 10px;
    display: inline-block;// 设置为行内块级元素
}
</style>

相对定位（适用于父子关系以及相邻关系，但是相邻关系容易造成覆盖的问题）

对子元素设置相对定位，使其相对于父元素的位置进行设置。

:root {
    text-align: center;
}


.box1 {
    width: 100px;
    height: 100px;
    background-color: red;
}

.box2 {
    width: 100px;
    height: 100px;
    background-color: #eae2dc;
    margin-top: 20px;
}

.child {
    width: 100px;
    height: 20px;
    background-color: #d39c90;
    margin-top: 20px;
    position: relative; // 相对于在父元素原来的位置的距离偏移
    top: 20px; // 注意：此处使用的是top
}

浮动（适用于父子关系，原因：浮动有父元素的位置的限制）

:root {
    text-align: center;
}


.box1 {
    width: 100px;
    height: 100px;
    background-color: red;
}

.box2 {
    width: 100px;
    height: 100px;
    background-color: #a8702c;
    margin-top: 20px;
}

.child {
    width: 100px;
    height: 20px;
    background-color: #d39c90;
    margin-top: 20px;
    float: left; // 添加浮动
}

BFC(适合于相邻和父子关系)

给父元素添加overflow:hidden触发BFC，使得元素形成独立的空间

<div class="contant">
    <div class="box1"></div>
</div>
<div class="contant">
    <div class="box2"></div>
</div>

<style>
.contant {
    overflow: hidden; // 给父元素触发BFC
}

.box1 {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    background-color: red;
}

.box2 {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    background-color: green;
}
</style>