为什么填充到包装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

你可以通过以下方式修复它：

• 使用padding上的#number1代替margin上的#number2，就像您在问题中所做的那样。
• 将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

因为“填充”用于“阻止”到“内容”距离。 并且“边距”用于“阻止”到“阻止”距离。