title: Why does select have a slightly larger height than input[type=text]?
body: <p>I can't figure out why the <code>select</code> element has a larger height than <code>input[type="text"]</code>.</p>
  
  <p>I thought that <code>line-height</code> controlled the height of inline elements like <code>select</code> and <code>input</code>, but it appears to work slightly different for the <code>select</code> element.</p>
  
  <p>Example:  <a href="http://jsfiddle.net/Dismissile/mnBsV/" rel="noreferrer">http://jsfiddle.net/Dismissile/mnBsV/</a></p>
  
  <p>I am setting the following style:</p>
  
  <pre><code>input[type="text"], select {
      padding: 2px;
      border: 1px solid #ccc;
      margin: 0;
      line-height: 16px;
      font-size: 14px;
  }
  </code></pre>
  
  <p>I would think that the elements would behave as such:</p>
  
  <p>16px + 4px + 2px (line-height + padding + border) = 22px</p>
  
  <p>This is what it does for the input, but the select is doing:</p>
  
  <p>18px + 4px + 2px </p>
  
  <p>Where is it getting the 18px from? Why aren't they consistent? Tested this in both IE8 and Chrome 15.</p>