Input field higher than expected

Question

So I got this input field that I expect to be 34px high (border 2px + padding 2 * 10px + text 12px), but it ends up higher than that:

• 37px in Firefox 15
• 37px in Chrome 22
• 36px in IE9

Question: why is my input field not 34px high?

The HTML / CSS

<input type="text" class="input" placeholder="Why is this not 34px high?">​

<style>
    .input {
    border: 1px solid #000;
    font-family: Arial;
    font-size: 12px;
    padding: 10px;
    width: 200px;
}​
</style>

Fiddle

Update: Defining line-height (12px) and setting box-sizing (border-box) does not help - updated fiddle

Answer 1

The reason is that you did not define a height for the text you created to be contained in, if you set this to 12, you'll see it's 34px in total height.

Keep in mind the box model. http://www.w3.org/TR/CSS2/images/boxdim.png

Answer 2

This is the box-sizing

The "box model" in CSS works like this:

width + padding + border = actual visible/rendered width of box height + padding + border = actual visible/rendered height of box

It's a little weird, but you get used to it. In IE 6 and earlier, when in "quirks mode," the box model was treated differently.

width = actual visible/rendered width of box height = actual visible/rendered height of box

Used to box-sizing:border-box

more info

link two