Remove top and bottom padding in text input in Chrome/Firefox
Solution 1
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.
Solution 2
It could be your font. Try setting the CSS height of the input directly or try adjusting line-height.
Solution 3
As Diodeus suggested, just add height to your input.
input.myInput {
font-family: "segoe ui";
font-size: 20px;
height: 20px;
padding: 0px;
margin: 0px;
outline: none;
border: 0px;
vertical-align: baseline;
}
line-height will not work
German Latorre
Clean code enthusiast since 1998, expertising C# and ASP.NET since 2003 and loving JavaScript since 2006, I am a serious web app developer and frustrated graphical designer. I love creating beautifully structured apps with any available technology (JavaScript, C# and modern PHP, mainly), and playing with any new framework or programming language as often as I can.
Updated on June 19, 2022Comments
-
German Latorre almost 2 years
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.