为什么包装 div 的填充看起来与内部 div 的边距不同？

我有 2 个 div

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

Why is

#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/

In 第一个案例，您遇到的意外行为是由于“边距崩溃”造成的。

规格：

• 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

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

• Using padding on #number1代替margin on #number2，正如您在问题中所做的那样。
• Adding overflow: hidden to #number1: http://jsfiddle.net/thirtydot/EWeDE/1/
• 添加一些填充#number1: http://jsfiddle.net/thirtydot/EWeDE/2/
• Adding float: left; width: 100% to #number1: http://jsfiddle.net/thirtydot/EWeDE/3/
• Adding display: inline-block; width: 100%; to #number1: http://jsfiddle.net/thirtydot/EWeDE/4/
• 添加边框#number1: http://jsfiddle.net/thirtydot/EWeDE/5/
• 我确信还有更多方法。