Button Height and a Broken Box Model

Published March 2, 2010 by CSS Newbies.

When I figured out the workaround for line-heights in form buttons last week, I also discovered an interesting discrepancy (feature?) across all major browsers in terms of buttons and the box model. Check out this article for a more in-depth refresher on the CSS Box Model, but here’s a brief summary:

Let’s say I have a div styled like so:

div {
	height: 30px;
	padding: 10px 0; 
}

The box model states that the resulting box will take up 30px of vertical space for the div’s contents, plus an additional 10px on the top and bottom for the padding, for a total of 50px vertical space taken up by our div.

Back in the day, the problem was that while most browsers accepted this “standard” box model, Internet Explorer decided to be all rouge-ish and maverick-y and come up with a box model of their own. In their model, the entire div should take up 30px of vertical space, which would mean in our example above that 10px was subtracted from the top and bottom of the div’s interior to make room for padding… meaning there was only 10px left over for the div’s contents.

As you can imagine, this caused all sorts of problems for web designers trying to design for both box models. There were workarounds of course, but they bloated our code and made our lives just that much less glamorous. I mean, who has time for champagne pool parties when you’ve got to write browser-specific stylesheets?

To be fair, Internet Explorer has since begun to adhere to the standard box model. Old pages that used the old box model still work as such in “Quirks” mode, while new standards-compliant pages are rendered appropriately in “Standards” mode (there’s an article on Quirks vs. Standards modes here).

Back to the Future

So what the heck does this have to do with us? After all, we live in The Future. Well, as far as I can tell, buttons still use the non-standard box model. And the strangest thing to me is, this holds true in every single browser I tested: Chrome, Safari, Firefox, Opera, and Internet Explorer.
Let’s look at an example. Here’s the (essentially identical) CSS for a nice input-style submit button:

button {
	height: 30px;
	padding: 10px 0; 
}

I’ve specified a height of 30px and top and bottom padding of 10px, which according to the box model should result in a total height of 50px overall, right? Except as you can see in the image up top, Firebug (running in the most recent edition of Firefox) reports a total height of just 30px: it’s subtracting the padding I’ve applied, in addition to the height of the default button borders.

Which means that, in addition to Firefox ignoring line-height on buttons, it also ignores the modern box model altogether!

So what gives? What makes a button any different than any other element on the page? I wish I knew. In fact, if you do happen to know the answer to this riddle, please share with the class in the comments below. Until then, I don’t have a solution to this particular peccadillo. But knowledge is half the battle!

16 Responses

  1. Justin (reply)

    Button elements aren’t block-level elements. I believe technically they’re “replaced in-line elements”; you can see they’re “display: inline” in Firebug or any DOM inspector.

    SitePoint has a decent description of them. Basically browsers can get away with rendering them however they want, because there aren’t explicit specs covering them.

    http://reference.sitepoint.com/css/replacedelements

  2. Ole (reply)

    Styling form elements is always a mess, also nowadays… But as Justin mentioned, form elements are (all?) inline-elements, so they can’t handle fixed vertical heights, paddings, etc.

    Try to set them as display:block and see what happens…

  3. Mark @ Alchemy United (reply)

    “The box model states that the resulting box will take up 30px of vertical space for the div’s contents, plus an additional 10px on the top and bottom for the padding, for a total of 50px vertical space taken up by our div. ”

    Hummm… My understanding is padding goes to the inside. To get 50px total you’d have to be setting the margin, not the padding, no? Margin is the space between. Padding is the space inside. Or at least that’s what I thought.

  4. Ben (reply)

    input[type=”submit”] uses the traditional box model (box-sizing: border-box). You can force it to use the W3C model using the CSS3 declaration:

    box-sizing: content-box

    In Mozilla, you can use:

    -moz-box-sizing: content-box.

  5. Ben (reply)

    input[type=”submit”] uses the traditional box model (box-sizing: border-box). You can force it to use the W3C model using the CSS3 declaration:

    box-sizing: content-box

    In Mozilla, you can use:

    -moz-box-sizing: content-box.

  6. Norman (reply)

    instead of display:block, try display:inline-block
    that way the buttons will stay in line but you can set height and padding as you wish

  7. Nathaniel (reply)

    From the time I started web design I felt padding functioned completely counterintuitive. It is ridiculous that padding gives additional height and width to the element. If the element’s width is 50px it should stay 50px. Padding shouldn’t change that. Padding should be added inside the element.

    But unfortunately it’s a standard. Perhaps there is some rational I don’t know.

  8. gwi (reply)

    “Inspect element” in Safari says it uses the browser default “-webkit-box-sizing: border-box;” for input[type=”submit”], button and others. So you can reset this behaviour with

    .button { box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; display: block; }

    e.g. if you want “input type=’submit’ class=’button'” and “a class=’button'” to appear identically. This does not answer the quetsion “why” but it works around this issue.

  9. Avangelist (reply)

    I don’t think any of these responses are right.

    If we are talking about a button element – i.e , this is an inline element as correctly stated by Justin. An inline element cannot work with the ‘box model’ by definition.

    If we are talking about taking a semantic approach, like a horizontal menu where the markup is made out of an ordered/unordered list where the list is set to display inline, then we already have a clear problem.
    The list is set to inline. You can set the list items to display:block, but of course now the list is no longer displaying on a single horizontal line. TO complete this task you have to float the list elements.

    Note however, that this is only required for the list items, or buttons to be styled as desired, borders, padding, line-height and so on in IE7 ONLY.

    inline-block is not supported cross browser, and quite often will cause you more problems and even more markup. I think it is also uncertain whether it is going to be re-emerge into the CSS3 model.

    gwi suggests using box-sizing. I am sure that gwi is aware but hasn’t perhaps explained perfectly, that what they are describing is a style with a vendor prefix. This means that it is a style that is not globally accepted or in a final document from W3C.

    In this example box-size is a CSS3 style which is not currently supported, and is not intended for this sort of example. Not to say that it couldn’t be used in this way, I just wouldn’t.

    I don’t actually think that the issue presented relates in any way to browser mechanics. Bottom line is you are looking at an inline level element not a block level element.

    It’s all to do with the fact that you are trying to set a height. Don’t, just use padding to attain your height, because what you are not factoring is the line height of the element content.

  10. Satya Prakash (reply)

    Box-sizing discussion has saved me. On page my input box was having different height than other. and I was surprised.

  11. http://musiczone.allmusic-productions.be (reply)

    Before the workout began, I got to put together my own personal
    little avatar, that would mimic all my moves on the screen. I avoided starchy vegetables
    like broccoli and peas, which are healthy but can also increase
    my triglycerides. The level of the water should be so adjusted
    that it touches your navel when you sit in it.

    Feel free to surf to my web blog :: ลดน้ำหนัก (http://musiczone.allmusic-productions.be)

  12. Megan (reply)

    You need targeted traffic to your Button Height and a Broken Box Model website so why not try some for free? There is a VERY POWERFUL and POPULAR company out there who now lets you try their traffic service for 7 days free of charge. I am so glad they opened their traffic system back up to the public! Sign up before it is too late: http://newsletter-systems.com/1f

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>