Remove top and bottom padding in text input in Chrome/Firefox
css, firefox, forms, google-chrome, html
Solution
You need to reset the `line-height` of the input element to be 20px as well. By default, some browser add 4px (2 top + 2 bottom) to input element's line-height.
Problem
I'm trying to make a input look like plain text. The aim is to draw a span, when user clicks the span it hides and displays an input that looks like plain text, but editable by the user. In Chrome and Firefox I cannot get rid of top and bottom paddings, even if I set padding and margin CSS properties to 0. My CSS looks like this: ``` input.myInput { font-family: "segoe ui"; font-size: 20px; padding: 0px; margin: 0px; outline: none; border: 0px; vertical-align: baseline; } ``` See that font size is set to 20px. Chrome and Firefox add 4px padding-top and padding-bottom, so that input is 28px tall, not 20px as expected.