title: How to add padding or border to a DIV and keep width and height?
body: <p>Is there some way to keep a set width/height for a DIV, and pad the content without the DIV growing? See example below. I want all the boxes to be exactly 140x140.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="box1"&gt;Howdy.&lt;/div&gt;
  &lt;div class="box2"&gt;Howdy.&lt;/div&gt;
  &lt;div class="box3"&gt;Howdy.&lt;/div&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.box1 {
      width: 140px;
      height: 140px;
      background: #f66;
  }
  
  .box2 {
      width: 140px;
      height: 140px;
      background: #66f;
      padding: 1em;
  }
  
  .box3 {
      width: 140px;
      height: 140px;
      background: #6f6;
      border: 1em solid #000;
  }
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/Wrc5S/" rel="noreferrer">http://jsfiddle.net/Wrc5S/</a></p>