我有一個內部的div內含div。內部div的邊際影響包含div的邊際

HTML

<div id="container"> 
    <div id="inner"></div> 
</div>

CSS

#container { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
} 
#inner { 
    margin: 30px; 
    width: 40px; 
    height: 40px; 
    background-color: black; 
}

小提琴

http://jsfiddle.net/8xUTJ/4/

我希望這使一個小黑匣子在一個更大的紅色框垂直和水平居中。相反，我得到一個黑盒子粘在紅色盒子的頂部，紅色盒子有邊緣頂部。

有人可以解釋CSS認爲它在這裏做什麼？

來源

2012-09-28 Bobby

感謝以及斑點問題。花了我好幾年才發現我的代碼中發生了什麼。 – djpalme

將overflow:auto添加到#container div。

jsFiddle example

或者

邊框添加到#container股利。

您可以在W3C上了解有關摺疊邊距行爲的更多信息。

來源

2012-09-28 00:52:26 j08691

不確定誰低估了這一點，但如果您認爲對答案沒有用處，請說出來。 – j08691

只是說這不是我，儘管你對我的答案讚不絕口;） –

再次道歉。您對我的解決方案和倒計時的評論是在幾秒鐘內發生的......所以我只是做了一個假設。我的錯。我也希望人們能夠解釋讚譽，而不是僅僅發出反對意見的無禮姿態。 –

方法1

position:absolute用於內DIV，所以它知道什麼是30PX餘量從

http://jsfiddle.net/8xUTJ/5/

方法2

display:inline-block的內格

http://jsfiddle.net/8xUTJ/7/

方法3

border:solid 0 transparent到外層div

http://jsfiddle.net/8xUTJ/8/

你選:)

來源

2012-09-28 00:51:30

雖然提供的解決方案是可行的，但沒有人解釋這個問題。這就是所謂的邊緣崩潰，這種情況發生在幾種情況下。

情況1 - 這些項目將只相距30px，因爲邊距一起崩潰，較大的一個佔優勢。

<div style="margin-bottom: 20px"></div> 
<div style="margin-top: 30px"></div>

場景2 - （您的場景）內框的邊距溢出外框。

<div class="outer"> 
    <div style="margin-top: 20px"></div> 
</div>

解決方法是給外框一些填充或邊框（由他人建議）。很多時候，我用的外包裝盒下面的CSS來緩解這樣的情況：

.outer { 
    margin-top: -1px; 
    border-top: 1px solid transparent; 
}

來源

2012-09-28 01:07:29

猜你錯過了我在W3C關於崩潰邊緣的解釋的帖子中的鏈接。 – j08691

好問題和很好的答案。 – Eric

@ j08691 - 如果你看看你原來的帖子的時間和附錄的時間（帶W3C的參考文獻），你可以看到我在那個時候寫了我的答案（是的，它花了我5分鐘寫我的答案B/C我張貼之前測試我的代碼）。我在指責之前總是閱讀徹底。爲不方便的時間道歉。 –

檢查這個fiddle

您需要float內div，使其工作

#inner {  
    margin:30px; 
    float:left; /* give float */ 
    width: 40px; 
    height: 40px; 
    background-color: black; 
}

否則給overflow:auto財產div#container。

檢查這個fiddle

來源

2012-09-28 01:22:22

首先，#container有margin-top:0和#inner有margin-top:30px。這些元素的關係是父母和第一個孩子的關係。

如果沒有邊框，填充，內嵌的內容，或間隙分離塊的邊距，其第一子塊的邊距，或無邊框，填充，內嵌的內容，高度，最小高度或最大高度，以將塊的邊緣底部與其最後一個孩子的邊緣底部分開，然後這些邊距摺疊。摺疊的邊距最終在父級之外。

保證金倒塌手段這些利潤被組合成一個單獨的邊緣，其尺寸是最大的利潤合併進去

這些規則適用的甚至是零邊距，這樣的利潤率一個第一/最後一個孩子（根據上述規則）母公司的保證金是否是零

這就是爲什麼你恩其父之外結束卯起來用#container元素的外部施加，從小提琴30PX上邊距：

30px and 0 top margins collapse

來源

2012-09-28 01:56:54

內部div的邊際影響包含div的邊際

HTML

CSS

小提琴

回答

相關問題