Margin坍塌
什么是 Margin 坍塌？
塊與塊之間的頂部外邊距和底部外邊距有時候會被合并成這兩個外邊距的值最大的那一個鹃操，稱之為 Margin 坍塌
出現(xiàn)于哪些情況遗锣？
- 當(dāng)兩個豎直方向上的邊距元素相遇的時候：
假設(shè)我們有一個顏色為#ff6b6b的div位于頁面上帆阳，還有一個顏色為#4e97cd的div位于這個div的下面橱夭，html和CSS代碼分別如下：
HTML:
<div class="module__top"></div>
<div class="module__bottom"></div>
CSS:
.module {
display: block;
width: 100%;
height: 150px;
}
.module__top {
margin-bottom: 25px;
background-color: #f38a6d;
}
.module__bottom {
margin-top: 50px;
background-color: #3bbfef;
}
效果如下圖所示：
根據(jù)我們的直觀感覺氨距，中間這個白色的部分的高度，應(yīng)該是75px棘劣，然而運(yùn)行結(jié)果卻是50px俏让，較大的margin吞掉了較小的margin。
那么當(dāng)一個margin是正數(shù)茬暇，另外一個是負(fù)數(shù)的時候呢首昔？比如：
.module__top {
margin-bottom: -25px;
background-color: #ff6b6b;
}
.module__bottom {
margin-top: 50px;
background-color: #4e97cd;
}
最終的結(jié)果就是50 + (-25) = 25px
當(dāng)兩個值都是負(fù)數(shù)，比如-50px和-25px糙俗，那么最終的結(jié)果是-50px
- 父元素的
margin遇見了它的第一/最后一個孩子的margin
CSS:
/* 父元素 */
div {
margin: 15px;
}
/* 下面都是孩子元素 */
.red {
background-color: #ff6b6b;
}
.orange {
background-color: #ff9e2c;
}
.yellow {
background-color: #eeee78;
}
.green {
background-color: #4ecd9d;
}
.blue {
background-color: #4e97cd;
}
.purple {
background-color: #6c4ecd;
}
HTML:
<div class="red">
<div class="orange">
<div class="yellow">
<div class="green">
<div class="blue">
<div class="purple">Collapsed</div>
</div>
</div>
</div>
</div>
</div>
<div class="padding red">
<div class="padding orange">
<div class="padding yellow">
<div class="padding green">
<div class="padding blue">
<div class="padding purple">Not Collapsed</div>
</div>
</div>
</div>
</div>
</div>
運(yùn)行結(jié)果：
再一次勒奇，我們應(yīng)該想當(dāng)然認(rèn)為所有元素的margin加起來應(yīng)該等于父元素和孩子元素margin的總和。但是運(yùn)行結(jié)果顯示巧骚，孩子元素的margin將會被父元素的margin所覆蓋赊颠，父元素看起來就像一個大Boss。
通過給父元素添加1px padding或者border-top劈彪，就可以解決這個問題竣蹦。
如何解決 margin 坍塌問題？
一個方向上總是使用一種margin沧奴，不要混著用痘括，比如豎直方向上總是只使用margin-bottom，比如水平方向上總是只使用margin-left扼仲。
參考
Mastering margin collapsing
What You Should Know About Collapsing Margins
Single-direction margin declarations
