Remove extra button spacing/padding in Firefox
CssFirefoxButtonSpacingCss Problem Overview
See this code example: http://jsfiddle.net/Z2BMK/
Chrome/IE8 look like this
Firefox looks like this
My CSS is
button {
padding:0;
background:#080;
color:white;
border:solid 2px;
border-color: #0c0 #030 #030 #0c0;
margin:0;
}
How can I change the code sample to make the button the same in both browsers? I do not want to use JavaScript based hyperlinks because they do not work with space bar on keyboard and it has to have an href
URL which is not a clean way to handle things.
My solution, since Firefox 13
button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }
Css Solutions
Solution 1 - Css
Add this:
button::-moz-focus-inner {
padding: 0;
border: 0
}
http://jsfiddle.net/thirtydot/Z2BMK/1/
Including the border
rule above is necessary for buttons to look the same in both browsers, but also it removes the dotted outline when the button is active
in Firefox. Lots of developers get rid of this dotted outline, optionally replacing it with something more visually friendly.
Solution 2 - Css
To fix it on input elements as well add
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner
is simple perfect!
Solution 3 - Css
Corrected version of @thirtydot's answer:
button:: {
padding: 0px;
border: 0px;
}
button::-moz-focus-inner {
padding: 0px;
border: 0px;
}
Regarding Firefox 87:
-
button
inbutton::-moz-focus-inner
cannot be a class. (E.g..mybutton::-moz-focus-inner
does not work) -
There must be a
button { padding:0px; border: 0px; }
style present as well (This style can be given per class).