How to find font height?

Question

css

Hey!
Example: jsfiddle.net
I have this problem, or I don't understand something.
In the div block I put the text and set the size: and in addition I set the vertical padding: Based on these properties, the height of the block should be 48 + 16 + 16 = 80px. But, in fact, if you look in the devtool, the height of the block is 87px. Where are these 7px coming from? What do I not understand? font-size: 48px;
padding: 16px 0;

Answer 1

Unexplored depths of CSS: font metrics, line-hei...

Answer 2

line-height: 48px;

Answer 3

What do I not understand?

you don't understand that the height of the block with text is calculated not from the font size, but from its line-height multiplied by the number of lines. Well, then plus padding, border...