Firefox/Safari setting height as [specified height - padding - border] for input[type=button]

css, height, html, padding

Solution

Form elements have traditionally had a `width`/`height` that includes their padding/border, because they were originally implemented by browsers as OS-native UI widgets, where CSS had no influence over the decorations.

To reproduce this behaviour, Firefox and others render some form fields (select, button/input-type-button) with the CSS3 box-sizing style set to `border-box`, so that the `width` property reflects the entire rendered area width including the border and padding.

You can disable this behaviour with:

select, button {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

(or, which is more common for liquid form layouts where you want to use ‘100%’ width, you can set the others to `border-box`.)

The -browser prefixed versions have to be there to catch browsers that implemented this before the standardisation process got so far. This will be ineffective on IE6-7, though.

Problem

When I use the following CSS: ``` input[type=button] { background-color: white; border: 1px solid black; font-size: 15px; height: 20px; padding: 7px; } ``` with this HTML: ``` <input type="button" value="Foo" /> ``` I expect to see this, so the total height becomes `36px`: ``` 1px border 7px padding 20px content (with 15px text) 7px padding 1px border ``` But instead both Firefox 3.6 and Safari 4 show this: (Haven't tested in other browsers) Screenshot http://labs.spiqr.nl/upload/files/1223ef9cbae3ab6e43bd1f9215ebedb157ac7b22.png ``` 1px border 7px padding 4px content (with 15px text) => height - 2 * border - 2 * padding 7px padding 1px border ``` Does anyone have any idea why this happens? (Even if it's expected behavior, what's the logic behind it?)

Original source