CSS: Is font-size not acurrate?

The default line-height is higher than the font-size, that's why the span is higher than 50px in your example. If you set line-height to 1 or 100%, you see that the span has the same "real" height as the div: 50px. The accent on the "A" simply exceeds the 100% line-height and goes beyond the font-size, as an addition/exception.

div {
  height: 50px;
  font-size: 50px;
  line-height: 1;
  background: green;
}

span {
  background: red;
}

Green and Red are 50px high, with line-height 100%:
<div><span>jAaMgÁ</span></div>
The only thing that overflows is the accent on the "A" (and the very first letter "j", but to the left...):
<div>jAaMgÁ</div>

It is not acurrate.

CSS3 introduced a few changes allowing OpenType fonts: link. But also altering how font-size works:

• CSS2 font-size: The font size corresponds to the em square.
• CSS3 font-size: The font-size is a scale factor applied to the EM unit of the font.

If your browser supports only CSS2 the em square will be exactly the same as the font-size.

• But, by supporting CSS3 most browsers will now multiply the font-size against the font's "em unit" which is diferent for each font but allways > 1.

• As a result you will end with a bigger em square than expected which is the cause of the inacurracy.

A quick dirty solution would be to adjust the font size to your needs:

  font-size-adjust:0.4; //equivalent to 1:1 ratio

This will allow you to alter the font "em unit" thus the span height without changing the font-size.

div {
  height: 50px;
  font-size: 50px;
  background: green;
  font-size-adjust:0.4;
}

span {
  background: red;
}

.lineheight {
  line-height: 50px;
}

<p>Green is 50px, Red is 50px too</p>
<div><span>fg</span></div>

<p>Combine with line-height for best results</p>
<div class="lineheight"><span>fgjAaMgÁ</span></div>