Why is emspace or enspace breaking the CSS font line-height in the HTML?

Question

Confused about how the browser - any browser - because it's happening in all, goes about calculating emspace and enspace. Here's what's happening: I am using a free font called Gentium. font-size is 16px line-height is 19px

All looks fine. Non breaking spaces -   not a problem - that exists in the font as a character. thinspace   also working OK.

But if I try to use:   (#8194) or   (#8195)

The browser does create a space appr the correct width, but there seems to be a height to it, as well, and the whole line of text gets pushed downward despite the CSS line-height rule. Anybody know what's going on? Chars #8194 and #8195 aren't usually included as part of the font file. How does the browser calculate it? (Usually it works fine.) Where does it pull the character from if it's missing from the font file?

Thanks.

Answer 1

To the browser it's surely just another character ... and, being pulled from some font file ... which apparently doesn't have the same metrics (e.g. line height) as your Gentium font.