If I create an input with the following CSS
input {
border: none;
font-family: arial, sans-serif;
font-size: 16px;
line-height: 16px;
padding: 0;
}
I excpect a height of 16px of input, but the Chrome Developer Tools shows a height of 18px.
In Firefox the height is 16px.
What causes the additional 2px in Chrome?
Fiddle: https://jsfiddle.net/fh7upk0n/
I know that I have to use height if I want a fixed height, but I'm wondering where the 2px comes from.
you should use height instead of line-height
height- the vertical measurement of the container
line-height- the distance from the top of the first line of text to the top of the second
<input> fields. By explicitly setting the height value, then you can be more confident that it will appear the same height across browsers too.
My guess is that Chrome add 1px up and 1px down to make the text readable.
Of course you can force chrome to show a 16px height input by adding
height: 16px;
But as always, do not count on line-height to size un underlying element.
height = font-size and box-sizing: content-box;
input {
font-size: 20px;
height: 20px;
line-height: 1;
box-sizing: content-box;
padding: 1em;
border: 0;
}
