16

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.

4
  • Firefox and Safari do not normally display padding on standard buttons, so if you're using one of those browsers, the padding will not be applied. I believe Internet Explorer does apply some effect from padding (not sure if it works out perfectly though)
    – user571545
    Commented May 21, 2011 at 3:23
  • @jqueryrocks, the jsfiddle looks the same in IE7, IE8, Safari, and Firefox, so it's not an IE issue at least ;-)
    – yitwail
    Commented May 21, 2011 at 3:58
  • 1
    Not all w3schools says are correct. Why? see it here w3fools To help your further understanding about height/width. See it here
    – ace
    Commented May 21, 2011 at 7:43
  • 1
    I know w3schools is not authoritative, but if you google a question about html or css, it keeps coming up, so I included the quote so readers would know I at least googled before asking here. :) & Thanks for an interesting link.
    – yitwail
    Commented May 21, 2011 at 17:21

1 Answer 1

12

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.