title: Removing extra padding around text
body: <p>I have a <code>div</code>. And I'm trying to pad around the text 5px &mdash; no more, no less &mdash; but there's some extra spacing being thrown in there, like my browser is laughing in my face at my futile attempts to get this to do what I want it to do.</p>
  
  <h3>Here's the CSS I'm using:</h3>
  
  <pre><code>div{
      font-family:'Arial', sans-serif;
      padding:5px;
      font-size:14px;
  }
  </code></pre>
  
  <h3>And here's my HTML:</h3>
  
  <pre><code>&lt;div&gt;
      Sort By:
      &lt;select&gt;
          &lt;option&gt;Customer&lt;/option&gt;
      &lt;/select&gt;
      Search Customer:
      &lt;input type="text"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(No styling's going on for the <code>input</code> and <code>select</code> fields, by the way.)</p>
  
  <h3>And here's the output I'm getting in my browser window</h3>
  
  <p>(highlighted with Chrome's developer console to give you an idea of the extra spacing going on):</p>
  
  <p><a href="http://img715.imageshack.us/img715/2438/padding.png" title="oh man, r u srirs?">html output http://img715.imageshack.us/img715/2438/padding.png</a></p>
  
  <p>Wait a second, what's going on there?  I've got 5px of padding all around, and then this weird <em>inner padding</em> going on.  I measured it in an image editor, and that extra <em>padding</em> or whatever I should be calling it is adding an additional 8px of padding, top and bottom.</p>
  
  <p>Thought it might be a <code>line-height</code> problem &mdash; so I set that to 0.  Didn't change a thing.  Tried setting it to a negative number.  Didn't work, either;  in fact, Chrome wanted nothing to do with that and gave me an error.</p>
  
  <p>So what's this extra stuff doing here?  Does it have a name?  Can I shrink it?  I want exactly 5px of space around those letters, not a nearly-three-times-as-much 13px.</p>
  
  <p>I appreciate the help &mdash; thanks in advance.</p>