Remove extra button spacing/padding in Firefox

Question

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; }

Answer 1

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.

Answer 2

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!

Answer 3

Corrected version of @thirtydot's answer:

button:: {
    padding: 0px;
    border: 0px;
}

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

Regarding Firefox 87:

• button in button::-moz-focus-inner cannot be a class. (Eg .mybutton::-moz-focus-inner does not work)

• There must be a button { padding:0px; border: 0px; } button { padding:0px; border: 0px; } button { padding:0px; border: 0px; } style present as well (This style can be given per class).