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