为什么填充到封装div看起来不同的边缘到内部div？ [英] Why is padding to a wrapper div looks different the margin to an inner div?

问题描述

我有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/

And in the first case I get white lines at the top & bottom, where it is suppose to be the red color of div 1? http://jsfiddle.net/ZbCNq/

推荐答案

在第一种情况中，意外

规格：

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


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

• 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

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

您可以通过以下方式解决：

You could fix it by:

• 使用 padding ＃number2 上的＃number1


• 添加 overflow：hidden 到＃number1 ： http://jsfiddle.net/thirtydot/EWeDE/1/ li>

• 向＃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/ li>
  
• 我确定还有更多方法。

• Using padding on #number1 instead of margin on #number2, as you've done in your question.
• Adding overflow: hidden to #number1: http://jsfiddle.net/thirtydot/EWeDE/1/
• Adding some padding to #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/
• Adding a border to #number1: http://jsfiddle.net/thirtydot/EWeDE/5/
• I'm sure there are more ways.

这篇关于为什么填充到封装div看起来不同的边缘到内部div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！