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;
}
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.)
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;
}
And by the way, ::-moz-focus-inner
can be used on input elements as well.