为什么填充到封装div看起来不同的边缘到内部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的红色？

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://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 ： li>
  
• 向＃number1 添加一些填充：


• 添加 float：left; width：100％到＃number1 ：


• 添加 display：inline-block; width：100％; 到＃number1 ：


• 添加边框到＃number1 ： 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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！