title: Margin on child element moves parent element
body: <p>I have a <code>div</code> (<strong>parent</strong>) that contains another <code>div</code> (<strong>child</strong>). Parent is the first element in <code>body</code> with no particular CSS style. When I set</p>
  
  <pre><code>.child
  {
      margin-top: 10px;
  }
  </code></pre>
  
  <p>The end result is that top of my child is still aligned with parent. Instead of child being shifted for 10px downwards, my parent moves 10px down.</p>
  
  <p>My <code>DOCTYPE</code> is set to <code>XHTML Transitional</code>.</p>
  
  <p><strong>What am I missing here?</strong></p>
  
  <p><em>edit 1</em><br>
  My parent needs to have strictly defined dimensions because it has a background that has to be displayed under it from top to bottom (pixel perfect). So setting vertical margins on it is a <strong>no go</strong>.</p>
  
  <p><em>edit 2</em><br>
  This behaviour is the same on FF, IE as well as CR.</p>