why browsers reserve space for ACCENTED CHARACTERS even if there is not one?

Question

Reference :
My questions is in regard to explaination given by community members in this question How to remove space at top of

tag / align

Answer 1

This is entirely up to the font. See the screenshot of the example in question:

The line height of the highlighted "Lorem" is perfectly flush with the containing element (light blue). The letter simply doesn't stretch all the way up to the maximum available height, just the same as it doesn't stretch all the way down below the baseline.

It is up to the creator of a font to leave space above or below a letter, which is typically done to preserve the overall visual balance of the font face which includes letters which may be taller. See for example:

AÄ

If the "A" would be stretching all the way to the maximum available height, the "Ä" next to it would either be taller than tall or would need to be squished down. Since this looks crappy, the regular "A" is not as tall as it possibly could be so both "A" can be the same visually.

It has nothing to do with whether you're actually using accented letters or not, glyphs are not rescaled dynamically based on content. They're always the same height, which is set by the font creator. What if you had this block of text:

AAAAAAAAAAAAAAAAAAA ÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄ
ÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄ AAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAA ÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄ
ÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄ AAAAAAAAAAAAAAAAAAA

If the letter size would dynamically change based on whether you "need extra space" or not, this would give an extremely uneven appearance. Which is why it's not being done.