當包裝div沒有邊框時，這個浮動div如何獲得頂部邊距？

請注意：我不是問糾正問題，而是我想知道浮動的div是如何獲得距時的包裝div有0像素的邊界集。但是，當包裝div具有1px邊框設置，然後浮動div不獲得保證金，但在這兩種情況下secondDiv獲得預期的頂部邊距。當包裝div沒有邊框時，這個浮動div如何獲得頂部邊距？

請注意，我明白保證金崩潰的主題，但它與設定的邊界做什麼？

<div id="container">  
    <div id="firstDiv">FIRST Div inside CONTAINER</div> 
    <div id="secondDiv">SECOND Div inside CONTAINER</div> 
</div> 


body{ 
    width: 780px; 
    margin: 00px auto; 
} 
#container { 
    border: 1px solid orange; /* but when its set to 0px then floated div gets margin too*/ 
} 
#firstDiv{   
    float:left; 
} 
#secondDiv{ 
    margin: 14px;   
}

http://jsfiddle.net/dmpxw/

現在，如果包裝DIV的邊框設置爲0像素，然後飄然向下推得。但我認爲它不應該像以前那樣呆在那裏？

http://jsfiddle.net/dmpxw/1/

來源

2012-02-17 Shawn Taylor

這是一個有趣的一個。

當容器具有邊框，第二內div的餘量從邊界延伸 - 即餘量從邊界起適用。這是因爲邊界是邊距測量之前應用的最後一個項目。

當容器不具有邊框，第二內div的利潤率從最後一個項目，也就是現在的身體運行。所以邊距現在是容器的外側，所以容器現在實際上進一步向下 - 第一個內部div沒有邊距，並且正好在容器的頂部 - 它是在第二個容器中移動的容器本身案件。

如果添加了背景顏色你的榜樣，你可以看到，當你有一個邊界餘量在容器內，而當你有沒有邊界的餘量在容器外。 View the example on JSFiddle。

來源

2012-02-17 15:44:52 Fenton

但如何，即使容器被設定邊距，以便它可以爲包含div提供的參考幀中，該效果保持相同？ http://jsfiddle.net/dmpxw/2/ – 2012-02-17 16:21:11

邊距可以愉快地坐在彼此的頂部，但邊距不會溢出另一個元素或其填充或邊界。 – Fenton 2012-02-17 16:49:22

我學到的是：overflow：hidden創建了新的BFC，但它也不工作，並且首先向下推動。 http://jsfiddle.net/dmpxw/3/ – 2012-02-18 10:34:39

當包裝div沒有邊框時，這個浮動div如何獲得頂部邊距？

回答

相關問題