title: Why is <INPUT> wider than I told it to be?
body: <p>Given a <code>&lt;select&gt;</code> and an <code>&lt;input&gt;</code> element, both specified to be <strong>200px</strong> wide:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;body&gt;
  &lt;select style="width: 200px"&gt;&lt;/select&gt;&lt;br/&gt;
  &lt;input  style="width: 200px" type="text"&gt;
  &lt;/body&gt;
  &lt;html&gt;
  </code></pre>
  
  <p>One ends up wider<sup>1,2,3, 4</sup> than the other:</p>
  
  <p><img src="https://i.stack.imgur.com/d1RYR.png" alt="enter image description here"></p>
  
  <p>What is the <em>reason</em> for this?</p>
  
  <p>If someone can give the <em>reason</em>, perhaps the solution would be obvious, and not <a href="https://stackoverflow.com/questions/180647/how-to-line-up-html-input-elements">a hack&amp;pray</a>.</p>
  
  <h2>Layout</h2>
  
  <p>The applied layout is perfectly reasonable:</p>
  
  <p><img src="https://i.stack.imgur.com/ugJbd.png" alt="enter image description here"></p>
  
  <hr>
  
  <p><strong>Update 1</strong>: While i was writing this question <a href="http://www.codinghorror.com/blog/2011/05/the-infinite-version.html" rel="noreferrer">Chrome updated itself from <strong>17</strong> to <strong>19</strong></a>.</p>
  
  <p><strong>Update 2:</strong> Changing padding in the <code>&lt;input&gt;</code> from <strong>1</strong> to <strong>zero</strong>:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;body&gt;
  &lt;select style="width: 200px"&gt;&lt;/select&gt;&lt;br/&gt;
  &lt;input style="width: 200px; padding: 0" type="text"&gt;
  &lt;/body&gt;
  &lt;html&gt;
  </code></pre>
  
  <p>doesn't make the <code>&lt;input&gt;</code> <strong>200px</strong> wide (i.e. doesn't fix it).</p>
  
  <p><strong>Update 3:</strong> <a href="https://stackoverflow.com/a/11125884/12597">Applying a CSS reset</a>:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
     * {
         padding: 0;
         margin: 0;
     }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;select style="width: 200px"&gt;&lt;/select&gt;&lt;br/&gt;
  &lt;input style="width: 200px; padding: 0" type="text"&gt;
  &lt;/body&gt;
  &lt;html&gt;
  </code></pre>
  
  <p>Does not solve the problem:</p>
  
  <p><img src="https://i.stack.imgur.com/OcRsb.png" alt="enter image description here"></p>
  
  <p>Also, i am less interested in a solution than an explanation.</p>
  
  <h2>Footnotes</h2>
  
  <ul>
  <li><sup>1,2,3</sup> Chrome <strike>17</strike>19, Firefox, Internet Explorer 9</li>
  <li><sup>4</sup> on Windows 7 64-bit</li>
  </ul>
  
  <h2>Bonus Reading</h2>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/1727635/how-to-make-option-wider-than-select-in-ie6">How to make &lt;option&gt; wider than &lt;select&gt; in IE6?</a> (i don't want the option to be wider than the select, i'm not using IE6)</li>
  <li><a href="https://stackoverflow.com/questions/1700807/how-to-show-extended-option-in-select-list">How to show extended option in select list?</a> (width of dropdown matches width of control)</li>
  <li><a href="https://stackoverflow.com/questions/1633522/html-input-element-wider-than-containing-div">HTML input element wider than Containing Div</a> (no containing <code>&lt;div&gt;</code> here)</li>
  <li><a href="https://stackoverflow.com/questions/180647/how-to-line-up-html-input-elements">How to line up HTML input elements?</a></li>
  </ul>