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

Answer 3

Setting the font-size to 12px doesn't mean that the text becomes 12 pixels high.

The size of the font is not the height of the text lines any more. Once it was the size of the metal types that were used in typesetting, but now it's an imaginary value that the font designer defines. It's usually close to the text height, but it varies between fonts because of how much space is needed between text lines (for hanging characters like g ).

Also, font size is actually in points, so if you specify it in pixels the browser will convert it to points, and there is some rounding involved which can vary in implementation.

So, basically, when you specify a font size you can't expect to get the same pixel size in all browsers.

Answer 4

Seems like based on the font the line height is getting set

Here its takes font-size * 1.2 and rounds off the line-height i think.

normal line height calculation

Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as . We recommend a used value for 'normal' between 1.0 to 1.2. The computed value is 'normal'.

Refer http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height

Answer 5

The reason is that browsers calculate the height of an inline element in their own way: “The height of the content area should be based on the font, but this specification does not specify how. A UA may, eg, use the em-box or the maximum ascender and descender of the font.” (CSS 2.1, clause 10.6.1 ).

Using different fonts (say, Calibri, if you have it), you may get different heights even using the same browser.