CODEWITHSUNDEEP
htmlcss
jon
jon

Reputation: 1581

Why does css input text field need height to be specified to render correctly

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

Upvotes: 1

Views: 1547

Answers (2)

Aaron
Aaron

Reputation: 767

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.

Upvotes: 3

Obsidian Age
Obsidian Age

Reputation: 42304

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! :)

Upvotes: 3

Related Questions