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
.