Why does Firefox render sans-serif text without "top" spacing?

Question

I have a simple <a class="button"> element, and I noticed on Firefox, the text wasn't as vertically aligned as on Chrome.

Here is some sample code:

Here is my CSS:

body {
    font-family: sans-serif;
}

.button {
    font-size: 3em;

    display: inline-block;

    padding: 0.6em 1em;

    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    color: #333;
    background-color: #7d8cdd;
}

.button > span {
    background-color: #8cd5ed;
}

<a href="#" class="button"><span>CLICK ME</span></a>

Now what I'm not sure, is why Firefox is rendering the text so poorly. That is, it is putting a lot of space beneath the text, but not a lot above it.

Here are some screenshots:

Firefox:

Chrome:

Searching around, I wasn't able to find much reading material on the subject.

Anyone have any ideas why Firefox renders text with space at the bottom, but not at the top? Thanks.

NOTE: I am running Mac OS X Yosemite (10.10.5).

Answer 1

Figured it out. When putting font-family: sans-serif;, Chrome will choose Helvetica Neue, whereas Firefox will choose plain Helvetica. That difference of space is in the font files themselves.

Explicitly declaring

body {
  font-family: "Helvetica Neue", sans-serif;
}

instead "fixes" the issue on Firefox, aka, makes it so FF and Chrome will use Helvetica Neue as the render font (assuming it is available).