Why is a button without a border in Firefox two pixel higher than line-height?

Question

I've a Button with the following super simple css:

button {
  background: #005eb8;
  border: 0;
  padding: 0;
  color: white;
  line-height: 50px;
}

"line-hight" is set to 50px. But the button is (in Firefox) 52px - I expected it to be 50. Is there any reason for that? In chrome the height is 50 as expected...

Code at JSBIN: http://jsbin.com/jagiviyima/9?html,output

@jbutler483: Yes I added "?html,output" that you can see the code — Matthias, Jan 26 '15 at 17:03
as @chrisbedoya told you, you are using line-height instead of height, check another related: http://stackoverflow.com/a/7856737/4316870 — Leandro Carracedo, Jan 26 '15 at 17:07
The use of line-height was intended. But the defaults of -moz-focus-inner was my problem - as people below pointed out :-) — Matthias, Jan 26 '15 at 17:13

score 1 · Accepted Answer · answered Jan 26 '15 at 16:59

1

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
   border: none;
   padding:0;
}

Add such css rule.

answered Jan 26 '15 at 16:59

Mr Posia

81
4

Wow! That works. I've spend now hours on this - but I never though about focus-inner ...?! :-=) Thanks. – Matthias Jan 26 '15 at 17:09

score 1 · Answer 2 · edited May 23 '17 at 11:59

You ask - is there some reason for that - I believe it is. I don't have Firefox at hand now, but you are using button html element and buttons typically have some default css rules applied to them across the browsers (these are obviously browser specific). My guess is FF is adding some default padding, margin, border or something of that kind to your own defined style. Try setting these to 0 explicitly.

A bit of googling yielded this SO answer which exlains the issue in a more detail, proposed resolution is:

button::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner {
    padding: 0 !important;
    border: 0 none !important;
}

Thx for the explanation. Yes it was focus inner! Mr Posia was faster :-) — Matthias, Jan 26 '15 at 17:14

Why is a button without a border in Firefox two pixel higher than line-height?

2 Answers2