title: CSS Box Explanation - inner margin and outer container border affecting height
body: <p>I can't get my head around this but with the basic div containing an inner div if you remove the border style from either of the div element then the height of the overall box is affected?!? 
  Can someone explain this for me please?</p>
  
  <pre><code>&lt;div style="background-color:red;border:1px solid black;"&gt;
      &lt;div style="margin:10px;background-color:blue;border:1px solid black;"&gt;
          &lt;p style="margin:30px;background-color:gray;border:1px solid black;"&gt;test&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can you guys simulate this? does the height change if you remove the border styles?
  Hope someone can shed some light on this
  Many thanks!</p>