Question

I have 2 divs

<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;
}

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/

Answer 1

The spec:

较易读:

您可以通过以下方式确定:

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.

Answer 2

It because the "Padding" is used for "Block" to "Content" distance. and "Margin" is Used for "Block" to "Block" distance.