How Do I Fix Excessive Button Spacing in Firefox?

Fixing Button Spacing in Firefox

In Firefox, buttons tend to have extra padding and spacing compared to other browsers. This can be a cosmetic hindrance, especially when maintaining a consistent design across different browsers.

To eliminate this spacing, add the following CSS:

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

This rule targets the "focus inner" pseudo-element, which is specific to Firefox. By setting the padding and border properties to zero, the extra spacing is removed.

Additionally, it's advisable to include the border property in the rule. This is because setting the padding to zero removes the dotted outline that appears around the button when it receives focus in Firefox. Some developers choose to remove this outline entirely, while others replace it with a visually more appealing element.

With this CSS in place, buttons will have consistent spacing and appearance across both Firefox and other browsers. Refer to the updated JSFiddle example below for a visual comparison:

[Updated JSFiddle](http://jsfiddle.net/thirtydot/Z2BMK/1/)

The above is the detailed content of How Do I Fix Excessive Button Spacing in Firefox?. For more information, please follow other related articles on the PHP Chinese website!