In Chrome, input appears incomprehensible indents. Everything has vanished, in Firefox, the height is 18px as it should be, but in Chrome, 21px is displayed. Where the extra 3px comes from, I can not understand.

enter image description here enter image description here

.input { line-height: 1; font-size: 18px; margin: 0; padding: 0; border: none; background-color: green; } 
 <div class="input-wrap"> <input type="text" class="input" value="высота в chrome - 21px"> </div>

    1 answer 1

    Briefly add height to the input. Then in chrome and in FF will be the same. It seems like FF perceives the line-height as height , and chrome does not know how. (At the expense of this statement I can be mistaken). But adding the height: 18px should solve this problem.