title: Inner div's margin affecting containing div's margin
body: <p>I have an inner div inside a containing div.</p>
  <h1>HTML</h1>
  <pre><code>&lt;div id=&quot;container&quot;&gt;
    &lt;div id=&quot;inner&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <h1>CSS</h1>
  <pre><code>#container {
      width: 100px;
      height: 100px;
      background-color: red;
  }
  #inner {
      margin: 30px;
      width: 40px;
      height: 40px;
      background-color: black;
  }
  </code></pre>
  <h1>Fiddle</h1>
  <p><a href="http://jsfiddle.net/8xUTJ/4/" rel="noreferrer">http://jsfiddle.net/8xUTJ/4/</a></p>
  <p>I expect this to make a small black box centered vertically and horizontally in a bigger red box.  Instead I get a black box stuck to the top of the red box, and the red box has the margin-top.</p>
  <p>Can someone explain what CSS thinks it is doing here?</p>