Remove Extra Button Spacing/Padding in Firefox

Remove extra button spacing/padding in Firefox

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.

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

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

Firefox buttons have padding, Chrome buttons do not

Firefox gives buttons something called inner focus, this allows it to draw the dotted focus line. There is a rule in forms.css for it, which gives it 1px of border and 2px of left and right padding. I don't know whether it's possible to override this from a web page.

How to remove odd bottom padding from gradient inside a button on firefox?

OK, after your comments I figured out your issue:

give a position:relative and z-index:-1 to your button plus a few tweaks and here you go:

button {  border: none;  height: 212px;  margin: 12px;  max-width: 169px;  padding: 0;  position: relative;  z-index: -1;}img {} /* this can be empty */
.inner-gradient {  height: 50%;  position: relative;  display: block;  top: -108px;  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);  /* Chrome10-25,Safari5.1-6 */  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);  /* FF3.6-15 */  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=0);  /* IE6-9 */}.imageFilterLabel {  position: absolute;  display: block;  z-index: 100;  bottom: 20px;  width: 100%;  color: white;  font-size:14px;  font-weight:400;}

<button id="sunny-days" data-filter-value="Sunny Days" class="subjects">  <img src="//lorempixel.com/169/212">  <div class="inner-gradient"></div>  <span class="imageFilterLabel">Sunny Days</span></button>
<hr />
<button id="sunny-days" data-filter-value="Sunny Days" class="subjects">  <img src="//lorempixel.com/169/212">  <div class="inner-gradient"></div>  <span class="imageFilterLabel">Sunny Days</span></button>

Padding inside a button element not removable

In the fiddle, the button is not high enough for the text. But that is easily fixed by adding line-height:0 to the CSS.

Updated fiddle.

Note that this does not influence the position of the "X" the same amount in different browsers. Alternative solutions might be to make the font size smaller, using a lowercase "x" or a multiplication sign "×" etc., or a combination.

By the way, you said you tried setting the margin, but that is never a solution. The margin is on the very outside of the button. Padding would work, but you can have only positive paddings, not negative.

Firefox add's 2px padding in a submit button

I was having a problem like this. I then found this CSS thingy that solved the problem:

input::-moz-focus-inner { border:0; padding:0 }

This solution was given in a comment in this blog post:

Bulletproof CSS input button heights

As the post says: this happens because Firefox (User Agent) own CSS style uses !important and anything one tries to do to override the CSS property won't get applied.

Remove Extra Button Spacing/Padding in Firefox