CSS margin not according parent

Question

I have two divs, a "container" and a "content". If content is inside container, would fit container.

#container {
    display:block;
    width:300px;
    margin:auto;
    background:green;
}
#content {
    display:block;
    margin:20px; /* HERE IS THE ERROR */
    background:yellow;
}

The top and bottom margins are not inside parent, but left and right are.

Why does this happens?

EDIT: JSFIDDLE example:

Answer 1

This is due to margin collapsing - the top margins of a block level elements' first child (assuming it's also block level and participates in the normal flow) will always collapse with the top margin of its parent.

One way around this is to change the display value of the child div to inline-block.

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

^{Note: As AndyG pointed out you can also prevent margin collapsing by using padding or borders on the container div among many other ways. See the spec for a complete list.}

Answer 2

You can do next:

• add overflow: hidden; to parent;
• add border, like this border: 1px solid transparent; to parent

• add padding to parent

  #container {
      background: green;
  
      border: 1px solid transparent;
  
      display: block;
      margin: auto;
      width: 300px;
  }
  #content {
      background: yellow;
      display: block;
      margin: 19px; /* because 1px for parent border */
  }
  

Example http://jsfiddle.net/3cXys/