Looks like here are no real answer of why.

I have same question.

I have <header>AaBb</header> I used font-size: 3rem; in css and got font size 48, but content height 55. I cheked on Chrome, Firefox and Edge. All browsers give diffirent content height, but diffirence is small. For Chrome and Edge it is <0.1, Firefox give 56 content heights.

To test out I have tryed to change font-size from 1rem to 10rem. Made table from this data

From table can be seen, bigger font size, bigger diffirence in element content height, but diffirents for 1rem is from 2.0 to 2.5 px. P.S. I have rounded content height, but not by much, because all number had .994 at the end.

This image show how element looks in dev-tools. As can be seen, text have white space above and below. My guess is, font size only include size of text, but not white space above and below. At 1rem white space is 1px above and 1px below and it scale with fon't size. Because of this at 10rem diffirence is 25px, or 12.5px above and 12.5px below.

Can this white space be removed? I don't know. Could not find yet.