Why does adding a div to the shell look different with respect to the inner div?

Question

I have 2 divs

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

Why

 #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 above and below, where it is assumed that this is the red color of div 1? http://jsfiddle.net/ZbCNq/

Answer 1

In the first case, the unexpected behavior that you experience is associated with "folding fields."

Specification:

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

A bit easier to read:

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

You can fix this:

• Using padding on #number1 instead of margin on #number2 , as you did in your question.
• Adding overflow: hidden to #number1 : http://jsfiddle.net/thirtydot/EWeDE/1/
• Adding some addition to #number1 : http://jsfiddle.net/thirtydot/EWeDE/2/
• Adding float: left; width: 100% float: left; width: 100% in #number1 : http://jsfiddle.net/thirtydot/EWeDE/3/
• Adding display: inline-block; width: 100%; display: inline-block; width: 100%; in #number1 : http://jsfiddle.net/thirtydot/EWeDE/4/
• Adding a border to #number1 : http://jsfiddle.net/thirtydot/EWeDE/5/
• I am sure there are more ways.

Answer 2

This is because Fill is used to Block to Content. and “Margin” is used to “Block” to “Block” the distance.