CODEWITHSUNDEEP
htmlcssfirefox
kjo
kjo

Reputation: 35301

Why the extraneous horizontal padding inside button (Firefox only)?

Code snippet (JSFiddle):

* {
    outline: none;
}

button {
    background: firebrick;
    width: 200px;
    height: 40px;

    margin: 0px;
    padding: 0px;
    border: none;
}

button > div {
    background: lightskyblue;
    margin: 0px;
    padding: 0px;
    border: none;
}
<div style="padding: 60px;">
  <button>
    <div>label</div>
  </button>
</div>

Under Chrome, the left and right edges of the button > div are flush with those of the containing button; as a result, the button's background is split into two non-contiguous regions, above and below the button > div element:

enter image description here

Under Firefox, however, this is not the case. The button > div appears completely surrounded by the button's background, just as it would if the button's left and right padding (and/or the button > div left and right margins) had bee set to some value > 0.

enter image description here

Can someone tell me

what other CSS setting can account for this extraneous padding/margin under Firefox?

(Note: by "other CSS setting" I mean one that is not explicitly set in the example's CSS.)

See working example here.

Upvotes: 3

Views: 76

Answers (1)

sergdenisov
sergdenisov

Reputation: 8572

Add this styles to fix it:

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

Code snippet (JSFiddle):

* {
    outline: none;
}

button {
    background: firebrick;
    width: 200px;
    height: 40px;

    margin: 0px;
    padding: 0px;
    border: none;
}

button > div {
    background: lightskyblue;
    margin: 0px;
    padding: 0px;
    border: none;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}
<div style="padding: 60px;">
    <button>
        <div>label</div>
    </button>
</div>

Upvotes: 3

Related Questions