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

In Webkit

The extra vertical "padding" on input[type="text"] in Webkit is because you cannot give text inputs a line-height value of less than normal, which isn't a specific value, but varies depending on the typeface.

I know this is the cause, but I cannot find where the input would be getting this style, because it doesn't appear in the Webkit UA stylesheets.

In Gecko

The extra vertical "padding" on input[type="text"] and input[type="button"] in Gecko is due to user-agent stylesheet containing:

input {
    line-height: normal !important;
}

and !important declarations in the user-agent stylesheet cannot be overidden in any way.

Conclusion

You can't go under line-height: normal in Webkit, and you can't have anything other than line-height: normal on these elements in Gecko, so the best solution is to always style these elements with line-height: normal to get the best consistency, which isn't really a nice solution. Ideally, we'd be able to override all UA styles.

---

Neither of these account for the extra 1px of what acts like text-indent that only appears on input[type="text"] in both rendering engines.

---

People who care about this, should voice their opinions on these two Bugzilla threads:

• https://bugzilla.mozilla.org/show_bug.cgi?id=697451
• https://bugzilla.mozilla.org/show_bug.cgi?id=349259

Answer 2

The reason this is happening is because the browser is treating the content of the <input> as if it were an inline element, regardless of the display setting of the <input>. 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).