CSS margin not according parent -

i have 2 divs, "container" , "content". if content inside container, fit container.

#container {     display:block;     width:300px;     margin:auto;     background:green; } #content {     display:block;     margin:20px; /* here error */     background:yellow; } 

the top , bottom margins not inside parent, left , right are.

why happens?

edit: jsfiddle example:

this due margin collapsing - top margins of block level elements' first child (assuming it's block level , participates in normal flow) collapse top margin of parent.

one way around change display value of child div inline-block.

#content {     background: yellow;     display: inline-block;     margin: 20px; } 

^{note: andyg pointed out can prevent margin collapsing using padding or borders on container div among many other ways. see spec complete list.}