Firefox button padding CSS fix

By Mattias Kihlström

In the Mozilla Firefox web browser buttons get an extra inner padding. This padding is not affected by styling button elements the normal way. The fix is to use the ::-moz-focus-inner pseudo class in your CSS.

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

Same same but different

If your CSS looks like this…

button {
    padding: 0.5em;
    border: 1px solid currentColor;
    background: white;
}

… you will see about one pixel extra padding in Firefox compared to other browsers. (You need to set the border or the background to something as well or else the padding will have no effect.)

Button as rendered in Google Chrome Button as rendered in Mozilla Firefox without fix

No problem

If you add styling that zeroes out both padding and border of button::-moz-focus-inner you get a result that is more in line with other browsers.

button {
    padding: 0.5em;
    border: 1px solid currentColor;
    background: white;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

Button as rendered in Google Chrome Button as rendered in Mozilla Firefox with CSS fix applied

And by the way, ::-moz-focus-inner can be used on input elements as well.