Text input on Chrome: line-height seems to have a minimum

Question

I\'m trying to style a text input with a value, text input with a placeholder, and a span, identically in Chrome. Specifically, I would like to control the line-height indep

Answer 1

Why is this happening?

This misalignment is being caused by the caret and as such I don't think you will find a way to align the text if the font-size and line-height are the same.

Why is the caret at fault?

The caret has a height greater than the text which is causing the alignment to be skewed.

There are a few things which support this:

1. You can see the size of the caret

• Click into the input and hold the left mouse button. Drag up and down and you will see that the text will move
• Remove height: 50px; from input, span. The size of the input will now increase to the height of the caret

div {
  line-height: 50px;
  font-family: Arial;
}
input, span {
  font-size: 45px;
  line-height: 50px;
  width: 100px;
  padding: 0;
  min-height: 0;
  display: inline-block;
  font-family: inherit;
  border: 2px solid red;
  overflow: hidden;
  vertical-align: top;
}

  
  
  Text

2. The placeholder text is correctly aligned

• The placeholder text is not effected by the caret so is correctly aligned
• As soon as text is added to the input the alignment is thrown off

The result of the caret having a greater height is that the line-height is being artificially increased causing the text to be out of line.

This can be proven by:

• Changing line-height to 58px. The alignment of the placeholder text and span will be the same as the input

div {
  line-height: 50px;
  font-family: Arial;
}
input, span {
  font-size: 50px;
  line-height: 58px;
  height: 50px;
  width: 100px;
  padding: 0;
  min-height: 0;
  display: inline-block;
  font-family: inherit;
  border: 2px solid red;
  overflow: hidden;
  vertical-align: top;
}

  
  
  Text

• Changing font-size to 45px. The caret will now fit in the 50px height

div {
  line-height: 50px;
  font-family: Arial;
}
input, span {
  font-size: 45px;
  line-height: 50px;
  height: 50px;
  width: 100px;
  padding: 0;
  min-height: 0;
  display: inline-block;
  font-family: inherit;
  border: 2px solid red;
  overflow: hidden;
  vertical-align: top;
}

  
  
  Text

What can be done?

As there is no way to style the caret itself (to make it smaller) the most efficient way of ensuring the text is aligned would be to use a font-size which is smaller than the line-height. This will in turn make the caret smaller and stop it from artificially increasing the line-height of the input.

div {
  line-height: 50px;
  font-family: Arial;
}
input, span {
  font-size: 45px;
  line-height: 50px;
  height: 50px;
  width: 100px;
  padding: 0;
  min-height: 0;
  display: inline-block;
  font-family: inherit;
  border: 2px solid red;
  overflow: hidden;
  vertical-align: top;
}

  
  
  Text

Alternatively you could remove height and just specify a line-height equal to the height of the caret:

div {
  line-height: 50px;
  font-family: Arial;
}
input, span {
  font-size: 50px;
  line-height: 58px;
  width: 100px;
  padding: 0;
  min-height: 0;
  display: inline-block;
  font-family: inherit;
  border: 2px solid red;
  overflow: hidden;
  vertical-align: top;
}

  
  
  Text