How to remove default padding using a button in Firefox?

Question

I have a span element inside a button. Space has a background color, but I can’t make it fill the button in Firefox, this is normal in Chrome and IE.

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

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

Here is 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

As well explained here : "Firefox adds special padding elements to input and buttons."

This really fix your problem.

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