1

Can someone please explain why the <button> element still has a bit of padding regardless of the styling? Compare the four elements in the snippet below: <button> <a> <span> <div> which all have identical style applied. The last three look identical but the button stubbornly refuses to lose the padding in Firefox. Inspector shows that it renders identical in Chrome but not Firefox.

Is there a CSS rule I can apply to control this?

.style {
  padding: 0px;
  border: none;
  background-color: #000;
  color: #fff;
  font-family: sans-serif;
  font-size: 14px;
  display: inline-block;
}
<button class="style">TEST</button>
<a class="style">TEST</a>
<span class="style">TEST</span>
<div class="style">TEST</div>
ADH - THE TECHIE GUY
  • 4,125
  • 3
  • 31
  • 54
But those new buttons though..
  • 21,377
  • 10
  • 81
  • 108
  • You can inspect in firebug, there is no padding of button it is just user agent margin to body tag. – Ashish Patel Dec 28 '16 at 05:05
  • Correct, there is no padding.. but yet.. there is. And the button is a different pixel size. What user agent style is doing this? – But those new buttons though.. Dec 28 '16 at 05:07
  • Yes, different useragent have their own css, also your settings of your browsers like font-size, color etc. – Ashish Patel Dec 28 '16 at 05:09
  • 1
    According to the linked question, the solution is `button::-moz-focus-inner { padding: 0; border: 0; }`. It seems that normalize.css will do this for you. –  Dec 28 '16 at 05:13
  • @torazaburo - thanks... searched but failed to find that one. – But those new buttons though.. Dec 28 '16 at 05:13
  • 1
    It seems that this bug is going to be fixed in FF 53.0a1, see https://hg.mozilla.org/mozilla-central/rev/f86ce2e2f6a5. Also, note that this fix might need to be applied to `input` elements as well. Finally, be aware that the patch using `-moz-focus-inner` will remove focusing behavior. –  Dec 28 '16 at 05:41
  • that may be but I'm stuck on v49 at the moment due to issues with Firebug on v50+ - namely script panel was (is?) broken. – But those new buttons though.. Dec 28 '16 at 05:44

1 Answers1

-1

It is basically firefox browser's issue so try to add button::-moz-focus-inner {padding: 0;border: 0}

.style {
  padding: 0px;
  margin: 0;
  border: none;
  background-color: #000;
  color: #fff;
  font-family: sans-serif;
  font-size: 14px;
  display: inline-block;
}
button::-moz-focus-inner {
  padding: 0;
  border: 0
}
<button class="style">TEST</button>
<a class="style">TEST</a>
<span class="style">TEST</span>
<div class="style">TEST</div>
aavrug
  • 1,849
  • 1
  • 12
  • 20