title: shrink div with padding or margin
body: <p>What I'm trying to do is the following.</p>
  
  <p>I have a div with a fixed height, lets just say its <code>100px</code>.<br>
  What I want is a div within this 100px div with a height of <code>100%</code> but then <code>10px</code> shorter at the top and bottom.<br>
  So the result will be a wrapper div with a <code>100px</code> height and a div within this wrapper div which starts <code>10px</code> from the top and ends <code>10px</code> from the bottom (i.e. <code>height:80px</code>).<br>
  The problem is that I'm getting a div which has a total height of <code>120px</code>.</p>
  
  <p><strong>Note: only html css solutions</strong><br>
  <strong>Note2: the div inside the wrapper has a height of 100%</strong></p>
  
  <p>CSS and HTML  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#t{
    height:100px;
    width:5px;
    background: blue;
  }
  
  #e{
    height:100%;
    width: 5px;
    padding-top:10px;
    padding-bottom: 10px;
    background: yellow;
  }
  
  #s{
    height:100%;
    width: 5px;
    background: gray;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="t"&gt;
    &lt;div id="e"&gt;
      &lt;div id="s"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's the JSfiddle I've been playing with
  <a href="http://jsfiddle.net/MWUsM/2/" rel="nofollow">http://jsfiddle.net/MWUsM/2/</a></p>