title: html/css: why does padding enlarge my div
body: <p>i have the following markup:</p>
  
  <pre><code>&lt;div
  style="position:absolute;width:100px;height:100px;background-color:#ccc"&gt;     
      &lt;div style="position:absolute;width:100%;height:100%;background-color:#fcc;padding:50px;"&gt;
  
                  TEST
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>to my understanding the padding in the inner div should only move the position of the text and not enlarge the div itself. 
  how can this be avoided? thanks!</p>