使邊緣擴展包含元素不能逃脫它？

當我對某個元素應用邊距而不是擴展其包含的元素時，會在其之外創建邊距。所以下面的代碼在div的彩色背景之間有一個空格。使邊緣擴展包含元素不能逃脫它？

爲什麼會發生這種情況？對於包含div的div來說，我認爲這更合乎邏輯（因此，代碼示例中沒有空白區域，而彩色「酒吧」會更胖）。

有沒有一種方式與CSS我可以阻止它發生？

<div class="one"> 
    <p>Text</p> 
</div> 
<div class="two"> 
    <p>Text</p> 
</div> 
<div class="three"> 
    <p>Text</p> 
</div> 
.one { 
    background: red; 
} 
.two { 
    background: green; 
} 
.three { 
    background: gold; 
}

UPDATE對不起，我不認爲我是清楚的。我明白，段落標記的邊距導致了空白，但我不明白爲什麼邊緣不'推回'包含的div（所以它看起來應該像填充已應用於包含div一樣）。

來源

2013-11-22 Evans

我認爲你是混淆邊距和填充 – SW4

@ExtPro他沒有重置樣式 –

當你更新你的問題，我覺得什麼困擾你的是Collapsing Margins

在CSS中，兩個或多個箱（這可能會或可能不是兄弟姐妹）的相鄰邊緣可以結合起來，形成一個單一的保證金。據說這種結合的邊際將崩潰，並且由此產生的合併邊際被稱爲摺疊邊際。

解決方案？在父元素上使用overflow: auto;。

Demo

如果你正在談論作爲我沒有看到你的代碼中使用任何空白演示空白..除了下面就是答案..

你不重置瀏覽器默認的樣式..

Demo

* { 
    margin: 0; 
    padding: 0; 
    outline: 0; /* Optional */ 
}

這裏我使用*選擇部，所有的元素，並且正在使用margin: 0;和padding: 0;重置瀏覽器默認設置..

因爲他們覺得從性能差一些不使用*選擇的觀點，因此，如果是這樣的話，你可以使用CSS Stylesheet Reset

如果您使用的利潤率在你的代碼比請參考此答案...

如果你是知道的CSS Box Model，border，padding和margin元素和內部沒有外界進行計數。因此，在這種情況下

enter image description here

你可能會喜歡有padding，而不是margin。

雖然，你可以通過使用box-sizing屬性設置爲border-box或padding-box這將算border和padding而計數它外面的元素內改變CSS盒模型的行爲..

來源

2013-11-22 15:36:26

段落標記有保證金在默認情況下。所以，如果你想擺脫的保證金，你需要將其設置爲0，並擴大你需要添加（容器的內墊）填充段容器，保證金用於容器

p { 
    margin: 0; 
    padding: 10px 0 
}

之外http://codepen.io/anon/pen/Bqgyd

來源

2013-11-22 15:38:14 Huangism

使邊緣擴展包含元素不能逃脫它？

回答

相關問題