爲什麼填充到包裝div看起來不同於內部div的邊距？

Question

我有2周的div

<div id=number1><div id=number2></div></div> 

爲什麼

#number1 { 
    background:red; 
} 

#number2 { 
    background:blue; 
    height: 200px; 
    margin: 10px; 
} 

不一樣

#number1 { 
    background:red; 
    padding:10px; 
} 

#number2 { 
    background:blue; 
    height: 200px; 
} 

而在第一種情況下，我得到的白線在頂部&底部，在那裏假設是div 1的紅色？ http://jsfiddle.net/ZbCNq/

Answer 1

在the first case中，您遇到的意外行爲是由於「摺疊邊距」造成的。

該規範：

• http://www.w3.org/TR/CSS2/box.html#collapsing-margins
• http://www.w3.org/TR/css3-box/#collapsing-margins

一些容易讀：

• http://complexspiral.com/publications/uncollapsing-margins/
• http://reference.sitepoint.com/css/collapsingmargins
• http://www.howtocreate.co.uk/tutorials/css/margincollapsing

您可以通過修復：

• 上#number2上#number1而不是margin使用padding，因爲你已經在你的問題做。
• 添加overflow: hidden到#number1：http://jsfiddle.net/thirtydot/EWeDE/1/
• 添加一些填充到#number1：http://jsfiddle.net/thirtydot/EWeDE/2/
• 添加float: left; width: 100%到#number1：http://jsfiddle.net/thirtydot/EWeDE/3/
• 添加display: inline-block; width: 100%;到#number1：http://jsfiddle.net/thirtydot/EWeDE/4/
• 添加邊框#number1：http://jsfiddle.net/thirtydot/EWeDE/5/
• 我相信還有更多的方法。

Answer 2

這是因爲「填充」用於「塊」到「內容」的距離。 和「邊距」用於「塊」到「塊」的距離。