Extra space below text in input filed; content height does not equal to "font-size" or "line-height"

Question

I want the total height of input field will equal to sum of:

Top and bottom borders
Top and bottom paddings
Line height

The solutions from question How to set the height of an input (text) field in CSS? does not work: the space between top and bottom paddings of input field does not equal to line-height.

In below example, font-size and line-height are 14px, but contents height is 16px. Maybe it depends on browser, so I created the screenshot for newest Chrome.

#input {
 font-size: 14px;
 line-height: 14px;
 padding: 10px 12px;
 border: 1px solid gray;
  
 margin-left: 12px;
 margin-top: 14px;
}

<input type="text" id="input" value="test">

can you please elaborate more of what you are expecting here — Anant Vikram Singh, Mar 17 '20 at 05:53
@SalunkeAkash, Understood, but why I can not size the height by line-height, paddings and border? — Takeshi Tokugawa YD, Mar 17 '20 at 06:04
you can refer this link https://stackoverflow.com/a/41336508/11926876 it will help you understand how this works — SalunkeAkash, Mar 17 '20 at 06:10

score 0 · Answer 1 · answered Mar 17 '20 at 06:39

0

#input {
 font-size: 14px;
 line-height: 14px;
 border: 1px solid gray;
  
 margin-left: 12px;
 margin-top: 14px;
}

<input type="text" id="input" value="test">

answered Mar 17 '20 at 06:39

Shanmugapriya D

296
1
12

Thank you for the answer. Is interpretation "you should not setup paddings for input fields" correct? – Takeshi Tokugawa YD Mar 17 '20 at 07:10

Extra space below text in input filed; content height does not equal to "font-size" or "line-height"

1 Answers1