CSS padding added to height/width for <input type='submit'>

Question

If this question has been asked, I apologize, but I couldn't find the exact same question. As W3schools says, The height property does not include padding, borders, or margins! (link). So here's a simple style declaration:

input {
  width:180px;
  height:18px;
  padding:7px;
  border:1px solid black;
}

and here's html:

<input type='text' name='text' value='194px by 32px' /><br  />
<input type='submit' name='button' id='button' value='180px by 18px' />

The text field is 194px by 32px as expected, but the submit button is 180px by 18px. Obviously, I can just increase the height & width of the button by twice the padding, but I want to understand why there's a discrepancy. I made a jsfiddle here: http://jsfiddle.net/RRf5A/. Thanks for your help. FYI, I already tried <button> instead of input submit, and display:inline-block.

Answer 1

You can get around this by adding box-sizing: content-box; to input elements of the type submit. Rather than go into detail myself I'll just send you along to http://www.quirksmode.org/css/box.html. However, it's not currently supported all across the board so you might find it better for cross-browser compatibility to specifically declare different heights and paddings for submission buttons.