title: CSS padding added to height/width for <input type='submit'>
body: <p>If this question has been asked, I apologize, but I couldn't find the exact same question. As W3schools says, <em>The height property does not include padding, borders, or margins!</em> <a href="http://www.w3schools.com/css/pr_dim_height.asp" rel="noreferrer">(link)</a>. So here's a simple style declaration:</p>
  
  <pre><code>input {
    width:180px;
    height:18px;
    padding:7px;
    border:1px solid black;
  }
  </code></pre>
  
  <p>and here's html:</p>
  
  <pre><code>&lt;input type='text' name='text' value='194px by 32px' /&gt;&lt;br  /&gt;
  &lt;input type='submit' name='button' id='button' value='180px by 18px' /&gt;
  </code></pre>
  
  <p>The text field is 194px by 32px as expected, but the submit button is 180px by 18px. Obviously, I can just increase the height &amp; width of the button by twice the padding, but I want to understand why there's a discrepancy. I made a jsfiddle here: <a href="http://jsfiddle.net/RRf5A/" rel="noreferrer">http://jsfiddle.net/RRf5A/</a>. Thanks for your help. FYI, I already tried <code>&lt;button&gt;</code> instead of input submit, and <code>display:inline-block</code>.</p>