title: Make margin extend containing element not escape it?
body: <p>When I apply a margin to an element rather than extending its containing element it creates margin outside of it. So with the code below there is a space between the divs's coloured background. </p>
  
  <p>Why does this happen? It would seem more logical to me for the containing div to be expanded (so im the code example there would be no white space and the coloured 'bars' would be fatter). </p>
  
  <p>Is there a way with CSS I can stop it happening?</p>
  
  <p><a href="http://codepen.io/anon/pen/KrJgm" rel="nofollow">http://codepen.io/anon/pen/KrJgm</a></p>
  
  <pre><code>&lt;div class="one"&gt;
    &lt;p&gt;Text&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="two"&gt;
    &lt;p&gt;Text&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="three"&gt;
    &lt;p&gt;Text&lt;/p&gt;
  &lt;/div&gt;
  .one {
    background: red;
  }
  .two {
    background: green;
  }
  .three {
    background: gold;
  }
  </code></pre>
  
  <p>UPDATE Sorry I dont think I was clear. I understand that the margin on the paragraph tag is causing the white space but what I dont understand is why the margin isnt 'pushing back' the containing div (so it would look the same as if a padding had been applied to the containing div).  </p>