Как узнать высоту шрифта?

Question

[Сергей]

Привет!

Примерчик: jsfiddle.net
У меня такая проблема, или я чего-то не понимаю.
В блок div я засунул текст и задал размер: font-size: 48px;
и вдобавок задал внутренние отступы по вертикали: padding: 16px 0;
Исходя из этих свойств, высота блока должна быть 48 + 16 + 16 = 80px.
Но, фактически, если посмотреть в devtool, высота блока равна 87px.
Откуда берутся эти 7px? Чего я не понимаю?

Comments

[one_day]

line-height: 48px;

Answer 1

[Сергей delphinpro]

Неизведанные глубины CSS: метрики шрифта, line-hei...

Answer 2

[display: block]

line-height: 48px;

Answer 3

[cssfish]

Чего я не понимаю?

вы не понимаете, что высота блока с текстом расчитывается не из размера шрифта, а из его line-height, помноженного на количество строк. Ну и далее плюс padding, border...