1

I have a text input styled with the class: 

.my_input{
  padding:10px;
  font-size:16px;
  line-height:16px;
  border:0;
}

You would expect the above to render an input field with a height of 36px, however it is rendering a text box as 38px high. If I set the height as a property it works, however I would like to know why it needs the height property set to accurately render it.

See my codepen for an example: https://codepen.io/jonniejoejonson/pen/Ewmyad

Thanks, J

jon
  • 1,429
  • 1
  • 23
  • 40
  • Because it is the right way to do this, instead of spending more code. What's wrong with the height? – Blues Clues Sep 28 '17 at 01:15
  • I'm not sure what your response means.. I'm just asking why the above class doesn't render with a height of 36px as would be expected. – jon Sep 28 '17 at 01:18
  • Possible duplicate of [height vs line-height styling](https://stackoverflow.com/questions/7616618/height-vs-line-height-styling) – Rob Sep 28 '17 at 02:27

2 Answers2

3

Your Codepen example defaults to Arial font. If you look in Dev tools (Chrome) you'll see the textbox as inner dimensions of 195x18, with the top and bottom padding of 10px, that's your 38 pixels in height explained.

Now set the .my_input class to use font-family: Tahoma;, now the inner dimensions are 191x19.

Why? Your browser is computing a reasonable value depending on the font size set or inherited on the element.

Excellent deep dive here, https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align.

Here's a key takeaway:

The Arial font describes an em-square of 2048 units, an ascender of 1854, a descender of 434 and a line gap of 67. It means that font-size: 100px gives a content-area of 112px (1117 units) and a line-height: normal of 115px (1150 units or 1.15). All these metrics are font-specific, and set by the font designer.

Note the 1.15 value. If we calculate (font size) 16px x 1.15 the result is 18.4. On Internet Explorer the height of the TextBox element is 18.4px (Chrome displays only 18px, an example of browsers treating this differently).

It's not the font size that's being changed, just the line height of the element.

In summary line-height depends on font-family, font-size and your browser. For this reason height is the more appropriate property to guarantee the result you expect in this case.

Aaron
  • 705
  • 10
  • 19
  • Thanks Aaron.. I will look at your link, however based on what your answer i don't understand why it would be changing the size of the font when that is also set in the css. – jon Sep 28 '17 at 01:40
  • Thanks @jon, I've updated my response, in short it's not the font size that's being changed, just the line height of the element. – Aaron Sep 28 '17 at 03:17
  • I currently have a scenario where a select box and an input field have the exact same font, font-weight, padding, margin and line-height, but render different heights. The input field is longer than the select field. – Eric McWinNEr Apr 14 '22 at 02:09
2

As is (roughly) explained in this answer, height is the vertical measurement of the container, and line-height is the distance from the top of the first line of text to the top of the second. line-height is equally divided above and below the text, and on inline elements (like <input>), specifies the height that is used to calculate line box height.

line-height has no influence on height, as can be seen in this fiddle.

Despite you not explicitly specifying a height, an <input> element cannot exist without one, and so it is automatically generated for you. According to MDN, the default height is calculated in the following way:

By default, the property defines the height of the content area. The content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. Its dimensions are the content width (or content-box width) and the content height (or content-box height).

This correlates to roughly 18px on most browsers.

Your <input> defaults to 38px because it inherits the 18px default height, plus the 20px of padding. Adding a custom height attribute overrides the default setting, and thus you end up with an <input> element with a height of 36px.

Hope this helps! :)

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • Thanks Obsidian Age.. So basically I need to define the height! – jon Sep 28 '17 at 01:47
  • Well yes, if you want it to have a particular height, then you do indeed need to specify what the height is :) – Obsidian Age Sep 28 '17 at 02:13
  • The statement that `line-height` is the distance from the top of the first line of text to the top of the next is incorrect. line-height is equally divided above and below for inline elements and one needs to read the CSS spec for further details (I'm on a phone). I just noticed that I objected to that answer back then, too. – Rob Sep 28 '17 at 02:36
  • @Rob -- That's an interesting point that you raise. Yes, line-height is equally divided above and below. Thinking about it, that would actually *have* to be the case for a single line of text. I've updated my answer to cover/correct that :) – Obsidian Age Sep 28 '17 at 02:53