css盒模型，關(guān)于外邊距塌陷(margin collapse)的問題有些疑問，請指教。手動(dòng)加問號(hào)？

先貼上css文檔的相關(guān)描述：

圖片描述

這里說的是，一個(gè)元素，它的上外邊距和下外邊距塌陷時(shí)的情況。
按照第二條規(guī)則，此元素的上邊框邊界的位置應(yīng)該和下邊框?qū)挾确?時(shí)的位置相同。
可是我的實(shí)踐跟css規(guī)范上描述的是不同的。

沒有發(fā)生邊界塌陷時(shí)的代碼如下:

//css
.box{
    margin-top:10px;
    margin-bottom:20px;
    border-bottom:1px solid red;
}
.item{
    float:left;
}
//html
<div class='box'>
    <div class='item'>今天天氣不錯(cuò)</div>
</div>

這個(gè)時(shí)候頁面效果如下圖所示：
圖片描述

按照理論，元素上邊框邊界的位置應(yīng)該就是這條紅線，距離頁面頂部10像素。

我將元素的下邊界邊框去掉，此時(shí)會(huì)發(fā)生外邊距塌陷。代碼修改如下：

//css
.box{
    margin-top:10px;
    margin-bottom:20px;
    //border-bottom:1px solid red;
}
.item{
    float:left;
}
//html
<div class='box'>
    <div class='item'>今天天氣不錯(cuò)</div>
</div>

這個(gè)時(shí)候的頁面效果如下圖所示：

圖片描述

很明顯，文本所在的元素具體頁面頂部的距離是20px。可是，按照css文檔上的規(guī)則，不應(yīng)該是距離頁面頂部10px嗎？

我使用的是Chrome瀏覽器。我的疑問是：

1.是不是我沒有正確理解css文檔規(guī)則？
2.是不是chrome瀏覽器沒有實(shí)現(xiàn)此css規(guī)則？

請賜教！

回答

編輯回答

若相惜

float元素是不能把父級(jí)元素?fù)胃叩?/p>

2017年12月9日 17:49

編輯回答

喵小咪

這是你理解的問題。
你的代碼是發(fā)生外邊距折疊的情況，但并不是你所給出的這段文檔中的情況。

首先來看你給出的文檔的情況：
文檔中的外邊距折疊屬于父元素與子元素之間的外邊距折疊，但是文檔中只提到了折疊產(chǎn)生的結(jié)果。
這里是MDN上的父元素與子元素外邊距折疊產(chǎn)生的條件：

如果在父元素與其第一個(gè)子元素之間不存在邊框、內(nèi)邊距、行內(nèi)內(nèi)容，也沒有創(chuàng)建塊格式化上下文、或者清除浮動(dòng)將兩者的 margin-top 分開；或者在父元素與其最后一個(gè)子元素之間不存在邊框、內(nèi)邊距、行內(nèi)內(nèi)容、height、min-height、max-height將兩者的 margin-bottom 分開，那么這兩對(duì)外邊距之間會(huì)產(chǎn)生折疊。此時(shí)子元素的外邊距會(huì)“溢出”到父元素的外面。

舉個(gè)符合條件的栗子：

.box {
    margin-top: 10px;
}

.item {
    margin-top: 20px;
}

結(jié)果是，item和box擁有相同的上邊距——20px（這里的上邊距是指視覺效果），也就是你給出的文檔中的情況：

the top border edge of the box is deined to be the same as the parent's
盒子的上邊距和父元素的相同。

也就是20px。結(jié)果20px是取的兩者margin-top較大的。
otherwise 的情況就是沒有產(chǎn)生外邊距折疊的情況，結(jié)果就是正常的顯示咯。
在item前增加一些元素來破壞產(chǎn)生外邊距折疊的條件：

<div class="box">
    <span>something</span>
    <div class="item">item</div>
</div>

這個(gè)時(shí)候再看，box上邊距是10px，item上邊距30px（距離窗口上邊緣），也就是正常的情況。

那再來分析一下你的示例代碼：
你的代碼屬于空的塊級(jí)元素發(fā)生的外邊距折疊。
在沒有設(shè)置border的時(shí)候：
item浮動(dòng)之后，box就是個(gè)空的塊級(jí)元素。

如果一個(gè)塊級(jí)元素中不包含任何內(nèi)容，并且在其 margin-top 與 margin-bottom 之間沒有邊框、內(nèi)邊距、行內(nèi)內(nèi)容、height、min-height 將兩者分開，則該元素的上下外邊距會(huì)折疊。

由于box發(fā)生外邊距折疊，選擇20px和10px之間較大的，所以box實(shí)際上邊距為20px，浮動(dòng)的item根據(jù)box進(jìn)行定位，所以上邊距也是20px。
當(dāng)你設(shè)置了border之后，就破壞了外邊距折疊的條件，所以就是正常情況，box的上邊距就是margin-top的10px。浮動(dòng)的item據(jù)此定位也就是10px。

除了這兩種外邊距折疊之外，還有相鄰元素的外邊距折疊，這個(gè)相對(duì)簡單，就不說了。
關(guān)于外邊距折疊問題，具體的解釋你可以看MDN，你看的文檔并不是那么容易理解，最主要的是你看的并不全。

2018年9月16日 11:12