CSS margin重疊和高度塌陷問題

Margin 重疊（Margin Collapse） 是塊級元素垂直方向外邊距合并的現(xiàn)象。以下通過 典型示例 和 解決方案 詳細說明

場景示例

  1. 場景一
    兩個上下并列結構的結構，如果給上面的盒子添加了margin-bottom，給下面的盒子添加了margin-top,期望的解析是兩者垂直距離之和，實際上的情況是會按照最大值解析。
.child1, .child2 {
  width: 200px;
  height: 100px;
  background: yellow;
  border: 1px solid black;
}
.child1 {
    margin-bottom: 20px;
}
.child2 {
    margin-top: 20px;
}

<div class="child1"></div>
<div class="child2"></div>

解決辦法

方法一

觸發(fā)BFC，給下面的盒子添加父元素，并且聲明overflow: hidden;

方法二

在兩個元素之間添加BFC
<div style="display:flow-root"></div>

方法三

用padding代替margin

  1. 場景二
    父子元素的margin-top會選取最大值，而不是二者相加
.parent1 {
  margin-top: 10px;
}
.child1 {
  margin-top: 100px;
}
<div class="parent1">
  <div class="child1"></div>
</div>

解決辦法

  • 父元素添加邊框(border)
  • 父元素添加內(nèi)邊距(padding)
  • 父子元素之間存在行內(nèi)元素<span>,匿名元素
    ...
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容