DIV內具有邊距的子元素

我需要兩個連續的div（具有背景）無縫接觸，一個在另一個之下。但是，當我將子元素p元素放入底部div時，此佈局會中斷。 p元素的邊距在兩個div之間強制空白。這是奇怪的行爲，因爲我期待p的邊距保持在div的內容和背景區域內。它在Firefox，Chrome和IE 8上呈現相同的方式。DIV內具有邊距的子元素

<div style="background: #ccccff">Top Div</div> 
<div style="background: #ffcccc"><p>Bottom Div</p></div>

下面是它的樣子。

Image showing the top div (in blue), then a white gap, then the bottom div (in pink). The white gap should not be present.

我可以通過改變邊距內邊距爲p元素解決這個問題，但我也有頭元素，列表元素，我想在使用任何其他元素來做到這一點開始div。這是不可取的。

有人能夠啓發我：我錯過了什麼樣的盒子模型？有沒有簡單的方法來解決這個問題，最好是通過修改div的風格？

來源

2009-12-10 myffical

這是expected behavior *。有幾種方法可以避開它。如果浮動div，它們將包含子元素的邊距並防止邊緣塌陷。另一種方法是向div添加邊框或填充。

* div和p「的邊距組合形成單個邊距」，即使它們是嵌套的，因爲它們具有相鄰的邊距而沒有填充或邊界。

來源

2009-12-10 06:33:38

是，看起來像是倒塌的邊框，但我仍然覺得它有點奇怪，謝謝你的提醒 – myffical 2009-12-10 06:43:03

+14

瀏覽器中的預期行爲是通常都是意料之外 – 2011-11-17 16:21:10

添加overflow: hidden或overflow: auto到div

來源

2009-12-10 06:32:34

完美地工作。謝謝！ – myffical 2009-12-10 06:39:35

父母有另一個下拉div時不起作用，就像它在我的情況（ – ruruskyi 2012-08-13 11:34:33

設置了積極的填充，和div元件上的相應的負利潤率似乎解決這個問題，但我不知道爲什麼。

<div style="background: #ccccff">Top Div</div> 
<div style="background: #ffcccc; padding: 1px; margin: -1px"><p>Bottom Div</p></div>

來源

2009-12-10 06:33:18

解決方案1 

添加溢出：隱藏/汽車到包含div防止保證金崩潰。

溶液2

到內含div和等於負餘量積極添加填充到內部元件

新解法

的0.01px添加填充到內含div，這將防止邊緣崩潰，但不會在內部元素上需要任何負邊界。

來源

2011-12-12 20:01:53

在Chrome上0.01px的工作對我來說是最重要的，但是0.1px卻能工作。我可以看到這個解決方案對使用溢出的吸引力，但是有沒有人通過瀏覽器進行過廣泛的測試？ – Evans 2014-03-24 15:57:16

適用於Chrome瀏覽器：padding-top：0.02px; – 2015-08-13 15:09:42

DIV內具有邊距的子元素

回答

相關問題