title: Why does this CSS margin-top style not work?
body: <p>I try to add <code>margin</code> values on a <code>div</code> inside another <code>div</code>. All works fine except the top value, it seems to be ignored. But why?</p>
  <p><strong>What I expected:</strong><br />
  <img src="https://i.stack.imgur.com/WFkp8.jpg" alt="What I expected with margin:50px 50px 50px 50px;" /></p>
  <p><strong>What I get:</strong><br />
  <img src="https://i.stack.imgur.com/I3xJz.jpg" alt="What I get with margin:50px 50px 50px 50px;" /></p>
  <p><strong>Code:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#outer {
          width: 500px; 
          height: 200px; 
          background: #FFCCCC;
          margin: 50px auto 0 auto;
          display: block;
  }
  #inner {
          background: #FFCC33;
          margin: 50px 50px 50px 50px;
          padding: 10px;
          display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="outer"&gt;
    &lt;div id="inner"&gt;
      Hello world!
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="http://www.w3schools.com/css/css_margin.asp" rel="nofollow noreferrer">W3Schools</a> have no explanation to why <code>margin</code> behaves this way.</p>