How do I remove the default padding from a button in Firefox?

Question

I have a span element inside a button. The span has a background colour but I cannot get it to fill the button in Firefox, it's fine in Chrome and IE.

I've looked at two similar questions but their answers don't seem to fix this for me.

• Remove extra button spacing/padding in Firefox
• firefox odd padding using anchor tags

Here's a stripped down version of my problem:

div {
    height: 300px;
    width: 300px;
    background-color: red;
}
button {
    padding: 0px;
    margin: 0px;
    color: inherit;
    border: 0px none;
    background-color: blue;
}
span {
    background-color: yellow;
    display: block;
    width: 100%;
}

<div>
    <button><span>span</span></button>
</div>

Answer 1

Like well explained here: "Firefox adds a special padding to inputs and button elements."

This actually fix your issue.

http://jsfiddle.net/2fm31sd7/1/

button::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="reset"]::-moz-focus-inner {
  padding: 0;
  border: 0 none;
}