How can I remove the extra, and different pseudo-padding on text inputs in Webkit and Gecko?

Question

The problem only happens on input[type=\"text\"] in Webkit. No matter what I do, there is the equivalent of an extra padding: 1px 0 0 1px (top and

Answer 1

The reason this is happening is because the browser is treating the content of the as if it were an inline element, regardless of the display setting of the . Inline elements have a minimum height as demonstrated here: http://jsfiddle.net/ThinkingStiff/zhReb/

You can override this behavior by making the "child" element inline-block. You can do this with the first-line pseudo-element.

input:first-line {
    display: inline-block;    
}

I go into more detail as to why this is in my answer to another question: https://stackoverflow.com/a/8964378/918414

This doesn't work in Firefox, but for another reason: Firefox's UA stylesheet (as outlined in @Ian's answer).