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

I've done a bit of experimenting with line-heights within input boxes and think I've come to some sort of conclusion.

It appears that if the size of the font in an input box equals or exceeds the line height, then the box changes size and its content (but not placeholder) changes also to fit. This is obvious if you remove the heights from your example.

  input, span {
    padding: 0;
    margin: 0;
    width: 100px;
    padding: 0;
    min-height: 0;
    display: inline-block;
    font-family: inherit;
    border: 2px solid red;
    vertical-align: middle;
  }

  input, input::-webkit-input-placeholder, span {
    line-height: 50px;
    font-size: 50px;
  }

  



Text

If you set the font-size to smaller than the line height, you no longer see the weird line-height effect and all the text sits on the same line:

  input, span {
    padding: 0;
    margin: 0;
    width: 100px;
    padding: 0;
    min-height: 0;
    display: inline-block;
    font-family: inherit;
    border: 2px solid red;
    vertical-align: middle;
  }

  input, input::-webkit-input-placeholder, span {
    line-height: 50px;
    font-size: 45px;
  }
   

  



Text

Here's a side-by-side example: http://codepen.io/Jivings/pen/OyOKOV

I hope this helps, and at least brings you closer to a solution in your own CSS!