Recently I came across a issue with the <button> element in Firefox. It seems that if you have the following code:


..and then apply CSS styles to set padding to zero for both the elements Firefox will automatically insert padding on the button. This is impossible to remove with standard CSS.

However there is an easy fix. Just add the following rule to your button element:

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

This should fix everything.

Posted on in Links

Article Comments

There have been 34 responses to this article

Leave your Reply

  1. Shane Robinson said: on May 24, 2009

    OMG!!! Thank you thank you! I’ve been trying to fix this in FF for the past hour and was going crazy.

    Why don’t I learn to just “Google It” if I havent’ fixed something in 5 minutes….?


    • get_dave said: on May 26, 2009

      Thanks Shane. Glad it helped you out. I spent ages looking for the solution to this too.

      Google is brilliant sometimes eh?


  2. Matt berridge said: on June 10, 2009

    Very helpful :)


  3. Syahir Hakim said: on June 27, 2009

    The only problem with this method is that it the CSS code wont be valid anymore. Checking using the W3C CSS Validator yields the following error:

    The pseudo-element ::-moz-focus-inner can’t appear here in the context css21

    I’ve yet to find any workaround for this. It’s annoying.


    • get_dave said: on June 27, 2009

      @Syahir Hakim Thanks for pointing that out. I believe it won’t validate but personally I don’t get too hung up on the validator. However, if you’re really concerned I would put it in a separate fixes.css file along with anything else that isn’t strictly Kosher.


  4. Simon Plangger said: on July 27, 2009

    Thanks a lot! That was bugging me for hours. I’ve yet to fully comprehend the behavior for buttons in every (relevant) browser.


  5. niggle said: on July 28, 2009

    Thanks Dude – very clinical


  6. twenty-three said: on November 20, 2009

    made my day! thx man


  7. lea said: on December 7, 2009

    Thank you so much, you saved my day.


  8. Steve said: on January 25, 2010

    Like everybody else here, i’ve been struggling with FireFox’s crazy button padding for ages, and this saved my layout! :) Many Thanks!


  9. Aaron said: on February 2, 2010

    Great fix. Thx. Any idea how to remove the padding from webkit browsers (Safari and Chrome) on Windows? The default padding is applied to these browsers in windows but not on OSX.


  10. get_dave said: on February 2, 2010


    I think I might have worked out a way to fix this in Chrome with negative margin and all kinds of faff.

    To be honest lately I’ve just not been putting spans inside buttons. It’s too unreliable!

    If I work something out I’ll re-post. Sorry if that’s not much help at the moment…


  11. get_dave said: on February 2, 2010

    Anyone looking to remove button padding from Webkit can try the solution at:


  12. Ashley said: on June 10, 2010

    This was a life saver! Thank you so much for putting this up!


  13. jack said: on July 14, 2010

    THX a lot! you saved my layout!


  14. Miles Johnson said: on July 21, 2010

    You should be using double span as well. It solves multiple problems when trying to style tags. Example, left and right images.


    Also double span works across all browsers with no problems (even IE6).


  15. andresgutgon said: on August 14, 2010

    Thanks a lot, it works perfect


  16. Ilian Andreev said: on August 19, 2010

    Saved a lot of pain to me as well, thank you!

    Strange that FF falls here but IE doesn’t.


  17. JB said: on September 2, 2010

    You save my life ;)


  18. never_again said: on September 10, 2010

    Oh! Jesus!! Thank you so much… This works like a charm!


  19. Martin Zvarik said: on October 21, 2010

    You’re the man dude!


  20. Leek said: on October 22, 2010

    Thanks a lot.


  21. dominic said: on January 21, 2011

    nice one thanks!


  22. Guilherme said: on January 28, 2011

    Thank you very much for this fix! It worked nicely here.


  23. Clara said: on January 31, 2011

    I was almost giving up! Thanks, very useful


  24. James Chapman said: on March 31, 2011

    Good tips there…

    Would it not be easier and less buggy to use a submit input tag instead and style accordingly? Thoughts?


  25. Ken said: on March 31, 2011

    THANK YOU SO MUCH. I have spend more than one hour fidling with this, until I came by your site.
    You really saved my day


  26. Mahesh said: on April 9, 2011

    10000 Thanks, you saved my huge time by giving perfect and brilliant solution.

    Thank you :)


  27. Sam said: on April 12, 2011

    THANK YOU!!!!!!! I wish I’d just googled this an hour ago >_<


  28. David Smith said: on March 24, 2012



  29. Fábio said: on May 23, 2012

    HUHU! I was going MAD whith this! I’ve been trying to fix my code for almost a week. Why didn’t I just search the web… and, why does Firefox do this in the first place? I hate these thing!
    Anyway, THANK YOU!


  30. Pete Droll said: on July 12, 2012

    Exactly what I was looking for! Thanks for posting!


  31. Charlottesville Media Group said: on August 10, 2012

    YES! Thank you.


  32. Elad Ossadon said: on August 30, 2012