title: Why Chrome doesn't respect the margin properly?
body: <p>I search for a long and I can't find an answer :/</p>
  
  <p>In Chrome (Internet Explorer, Konqueror, and many others) the <code>h1</code> margin at bottom is added to <code>.blue</code>. However, Firefox respect the css rules properly.</p>
  
  <p>Any suggestion?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="red"&gt;&lt;div class="blue"&gt;&lt;h1&gt;Hello World!&lt;/h1&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.red{
    background: red;
    /* All this contain margins */
    float:left;
    /* padding-top:1px; */
    /* display: inline-block */
    /* overflow: hidden */
  }
  
  .blue{
    background: blue;
    min-height: 60px;
  }
  
  h1{
    margin: 10px 0 20px;
    background: green;
  }
  </code></pre>
  
  <p><strong>Gecko-based:</strong> [This one is the correct, I guess]</p>
  
  <p><img src="https://i.stack.imgur.com/VrR0p.png" alt="enter image description here"></p>
  
  <p><strong>Webkit-based, KHTML-based and Trident shell:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/3oaC1.png" alt="enter image description here"></p>
  
  <p><strong>CODEPEN</strong></p>
  
  <p><a href="http://codepen.io/marquex/pen/fzsIk" rel="nofollow noreferrer">http://codepen.io/marquex/pen/fzsIk</a></p>