CODEWITHSUNDEEP
htmlcssgoogle-chrome
Hativ
Hativ

Reputation: 1530

CSS input height in Chrome

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.

Chrome Developer Tools calculated box model

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.

Upvotes: 5

Views: 3229

Answers (3)

Lurk
Lurk

Reputation: 11

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;
}

Upvotes: 1

Evya2005
Evya2005

Reputation: 438

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

Upvotes: 4

Anthony Granger
Anthony Granger

Reputation: 814

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.

Upvotes: 1

Related Questions