title: hierarchy of nested divs has unintended overlapping borders when using margin and padding
body: <p>When nesting <code>&lt;div&gt;</code>'s their <code>margin</code>'s and <code>padding</code>'s start to overlap. What I understood from <a href="http://www.w3.org/TR/CSS2/box.html" rel="nofollow noreferrer">the spec's</a> the <code>margin</code>, <code>border</code> and <code>padding</code> are just part of the space an element takes and each element should stay contained in the content-area of parent <code>&lt;div&gt;</code>.</p>
  
  <p>Clearly I understand wrong, but I hope somebody can explain me right.</p>
  
  <p>Bottom-line: please help me let the <code>thingy</code>'s stay inside the <code>top</code>. Preferably in a natural (not too hacky) way.</p>
  
  <p>Thanks for reading and any insight you can share in advance!</p>
  
  <h3>The Fiddle:</h3>
  
  <p><a href="http://jsfiddle.net/WrasM/2/" rel="nofollow noreferrer">http://jsfiddle.net/WrasM/2/</a></p>
  
  <h3>The HTML (making sure newlines in HTML don't have any influence):</h3>
  
  <pre><code>&lt;!--
  --&gt;&lt;div class="parent"&gt;&lt;!--
      --&gt;&lt;div class="top"&gt;&lt;!--
          --&gt;&lt;div class="thingy"&gt;label 1&lt;/div&gt;&lt;!--
          --&gt;&lt;div class="thingy"&gt;label 2&lt;/div&gt;&lt;!--
          --&gt;&lt;div class="thingy"&gt;label 3&lt;/div&gt;&lt;!--
      --&gt;&lt;/div&gt;&lt;!--
      --&gt;&lt;div class="bottom"&gt;&lt;!--
          --&gt;some test content&lt;!--
      --&gt;&lt;/div&gt;&lt;!--
  --&gt;&lt;/div&gt;&lt;!--
  --&gt;
  </code></pre>
  
  <h3>The CSS:</h3>
  
  <pre><code>.parent {  display: block;
             margin: 0px;  padding: 0px;
             border: 3px solid Yellow; }
  .top {  display: block;
          margin: 0px;  padding: 0px; }
  .thingy {  display: inline;
             margin: 20px;  padding: 10px;
             border: 1px solid DarkBlue; }
  .bottom {  display: block;
             margin: 0px;  padding: 0px;
             border: 1px solid DarkBlue; }
  </code></pre>
  
  <h3>The result:</h3>
  
  <p><img src="https://i.stack.imgur.com/Jd2r0.png" alt="fiddle_result.png"></p>