CSS中上下margin的傳遞和折疊

1.上下margin傳遞

1.1.margin-top傳遞

為什么會(huì)產(chǎn)生上邊距傳遞？

塊級元素的頂部線和父元素的頂部線重疊，那么這個(gè)塊級元素的margin-top值會(huì)傳遞給父元素。

示例代碼：給inner盒子設(shè)置margin-top: 20px;。

.reference {
  width: 100px;
  height: 100px;
  background-color: #f00;
  color: #fff;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #0f0;
}

 .inner {
   width: 100px;
   height: 100px;
   background-color: #00f;
   margin-top: 20px;
 }

<div class="reference">參考盒子</div>
<div class="box">
  <div class="inner"></div>
</div>

運(yùn)行結(jié)果：inner的margin-top的值傳遞給了box。

1.2.margin-bottom傳遞

為什么會(huì)產(chǎn)生下邊距傳遞？

塊級元素的底部線和父元素的底部線重疊，并且父元素的高度是auto，那么這個(gè)塊級元素的margin-bottom值會(huì)傳遞給父元素。

示例代碼：給inner盒子設(shè)置margin-bottom: 20px;，并且給父元素設(shè)置height: auto;。

.box {
  width: 200px;
  height: auto; /* 給父元素高度設(shè)置auto，或者不設(shè)置高度，默認(rèn)為auto */
  background-color: #0f0;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: #00f;
  margin-bottom: 20px;
  color: #fff;
}

.reference {
  width: 100px;
  height: 100px;
  background-color: #f00;
  color: #fff;
}

<div class="box">
  <div class="inner">inner</div>
</div>
<div class="reference">參考盒子</div>

運(yùn)行結(jié)果：inner的margin-bottom的值傳遞給了box。

1.3.如何防止出現(xiàn)傳遞問題？

• 給父元素設(shè)置padding-top或padding-bottom，防止頂部線或底部線重疊即可；
  

• 給父元素設(shè)置border，可以解決邊距傳遞的問題；
  

• 觸發(fā)BFC（Block Format Context，塊級格式化上下文），簡單理解就是給父元素設(shè)置一個(gè)結(jié)界，防止上下邊距傳遞出去（最優(yōu)解決方案）。觸發(fā)BFC有以下方式：

  • 添加浮動(dòng)float（float的值不能是none）；
  • 設(shè)置一個(gè)非visible的overflow屬性（除了visible，其他屬性值都可以，像hidden、auto、scroll等）；
  • 設(shè)置定位position（position的值不能是static或relative）；
  • 設(shè)置display的值為inline-block、table-cell、flex、table-caption或inline-flex；

2.上下margin折疊

上下margin折疊（collapse），也稱作外邊距塌陷。垂直方向上相鄰的2個(gè)margin（margin-top、margin-bottom）有可能會(huì)合并為一個(gè)margin。但是水平方向上的margin（margin-left、margin-right）永遠(yuǎn)不會(huì)折疊。

2.1.兄弟塊級元素之間上下margin折疊

示例代碼：給box1設(shè)置下邊距40px，給box2設(shè)置上邊距20px。

.box1 {
  width: 100px;
  height: 100px;
  background-color: #f00;
  margin-bottom: 40px;
}

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

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

運(yùn)行結(jié)果：兩個(gè)盒子間距為40px。

2.2.父子塊級元素之間上下margin折疊

示例代碼：inner設(shè)置上邊距為40px，父元素box設(shè)置上邊距為20px。

.reference {
  width: 100px;
  height: 100px;
  background-color: #00f;
  color: #fff;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #f00;
  margin-top: 20px;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: #0f0;
  margin-top: 40px;
}

<div class="reference">參考盒子</div>
<div class="box">
  <div class="inner">inner</div>
</div>

運(yùn)行結(jié)果：上邊距為40px。

2.3.總結(jié)

• 父子塊級元素之間上下margin折疊的原因是inner將上邊距傳遞給了父元素box，然后父元素box再與自己的上邊距進(jìn)行比較；
• 折疊后最終計(jì)算規(guī)則：兩個(gè)值進(jìn)行比較，取較大值；
• 如果想防止上下邊距折疊，只設(shè)置其中一個(gè)即可；