title: CSS margin-top of <h1> affects parent's margin
body: <p>I have look for a while now on this problem and have not found a straight answer.
  When adding a margin top to an element, in my case it happens mostly with headings. In many occasions the margin-top is shared with the parent.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;div&gt;
        &lt;h1&gt;My title&lt;/h1&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div{
    padding:20px;
  }
  
  h1{
   margin-top: 20px;
  }
  </code></pre>
  
  <p>The result of the previous code will also add a margin-top to the div, as if we had the following:</p>
  
  <pre><code>div{
    padding:20px;
    margin-top:20px; /*this one is implemented by the browser, not written on the code*/
  }
  </code></pre>
  
  <p>A way to solve this is by adding <strong><code>overflow:auto</code></strong> to the parent, in this case the div css has:</p>
  
  <pre><code>div{
    padding:20px;
    overflow:auto;
  }
  </code></pre>
  
  <p>Although the previous example solves the problem, it is not clear to me <strong>WHY???</strong>.
  This has something to do with <strong>"collapsing margins"</strong>, where apparently a margin is combined with the parent's margin. But <strong>why????</strong></p>
  
  <p>How do we know when a parent will collapse the margin of the child and when not, what is the purpose of this property of the blocks, or is it a bug?</p>
  
  <p>Here's a <a href="http://jsfiddle.net/superscript18/q2Vd9/" rel="noreferrer">JSFiddle demo</a> of the problem.</p>
  
  <p>And Here is a <a href="http://jsfiddle.net/c8bHL/" rel="noreferrer">JSFiddle demo</a> of the solution</p>
  
  <p>Thanks.</p>