Why does the padding of a div wrapper seem different from the margin for an inner div?

advertisements

I have 2 divs

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

Why is

#number1 {
    background:red;
}

#number2 {
   background:blue;
   height: 200px;
   margin: 10px;
}

Not the same as

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


In the first case, the unexpected behaviour you're experiencing is due to "collapsing margins".

The spec:

Some easier reads:

You could fix it by: