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

Updated base on comments below

In order to use the same line-height for each of the elements I updated the CSS to this:

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

div {
  line-height: 50px;
  font-family: Arial;
}

input, span {
    border: 2px solid red;
    display: inline-block;
    font: 50px Arial;
    height: 60px;
    line-height: 60px;
    padding: 0;
    vertical-align: middle;
    width: 100px;
}
input {
    padding-top: 3px;
}

Basically you if use the same contain height and line-height the text will show correctly next to each other even if you change the font sizes. The font size must be at least 10px or so bigger than the height and line-height otherwise it will become skewed again.

You can see my updated JS.Fiddle here. Hope that helps.