CSS保證金不根據母公司

我有兩個div，一個「容器」和一個「內容」。如果內容在容器內，則適合容器。CSS保證金不根據母公司

#container { 
    display:block; 
    width:300px; 
    margin:auto; 
    background:green; 
} 
#content { 
    display:block; 
    margin:20px; /* HERE IS THE ERROR */ 
    background:yellow; 
}

頂部和底部邊距不在父項內，但左側和右側均爲。

爲什麼會發生這種情況？

編輯：JSFIDDLE example:

來源

2013-07-31 Giovanne Afonso

餘量塌陷。使用容器中的填充來定位內容。或者確保容器沒有設置上邊距。 – ProfileTwist

這是由於margin collapsing - 塊級元素的第一個孩子的頂部邊緣（假設它也阻止一級和normal flow參與）將始終與頂緣塌陷其父母。

解決此問題的一種方法是將子div的change the display value設置爲inline-block。

#content { 
    background: yellow; 
    display: inline-block; 
    margin: 20px; 
}

^{注：由於AndyG指出，還可以阻止利潤率使用padding or borders on the container div許多其他的方式中倒塌。請參閱spec以獲取完整列表。}

來源

2013-07-31 15:59:50 Adrift

其中一種方法是將「padding：1px;」添加到容器（父級）元素。 –

這實際上是最好的方式，我忘記了父母和孩子之間的填充或邊界也可以防止崩潰。謝謝 – Adrift

如果您願意，可以將其添加到您的答案中;） –

你可以做下一個：

添加溢出：隱藏;給父母;
添加邊框，像這樣的邊框：1px實心透明;到父

添加填充到父

#container { 
    background: green; 

    border: 1px solid transparent; 

    display: block; 
    margin: auto; 
    width: 300px; 
} 
#content { 
    background: yellow; 
    display: block; 
    margin: 19px; /* because 1px for parent border */ 
}

例http://jsfiddle.net/3cXys/

來源

2013-07-31 16:02:43 Belyash

CSS保證金不根據母公司

回答

相關問題