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

SO Question - 33185205

OP

DEMO

FORK

Explination: is a replaced element so it's content does not get rendered by the user agent.

For details refer to: HTML5: Non-replaced vs. replaced element?

Solution:

See FORK or Snippet

html {
  height: 100vh;
  width: 100vw;
  font: 400 10px'Arial';
}
body {
  height: 100%;
  width: 100%;
  background-color: grey;
  color: #111;
}
#form {
  display: inline-table;
}
.box {
  display: table-row;
}
span,
input {
  font: inherit;
  font-size: 40px;
  /* */
  height: 50px;
  /* */
  line-height: 50px;
  /* */
  width: 100px;
  display: table-cell;
  outline: 2px solid red;
  border: 5px solid transparent;
  /* */
  padding: 0;
}

  




  

    

      
      
      Text
    
  

1. Set the height, and line-height of s equally. (e.g. 50px)

2. Set the font-size to a size less than height and line-height. (e.g. 40px)

3. Set either top and bottom of padding or border to the difference of the previous values divided by 2. (e.g. ((50px - 40px) / 2) = 5px)