Какова высота строки (и высота элемента), если font-size установлен в 1rem?

Question

шрифт установлен в 1rem, но высота строки и высота элемента больше, чем

.box {
  font-size: 1rem;
}

<div class="box">
  <div>FRONT</div>
</div>

Мне удалось выяснить, что высота блока составляет 1,167 мм. Это точно высота элемента, содержащего текст размером 1 мм? Я не уверен: / Что это за 0,167рем? Почему это так много? Как называется этот «пробел» над и под элементом / текстом? Я застрял: /

Answer 1

Это из-за высоты строки по умолчанию (которая немного выше, чем размер шрифта), установленной браузерами, чтобы сделать текст читабельным. Здесь вы можете явно установить line-height, например, line-height: 1, чтобы высота элемента соответствовала размеру шрифта текста. Значение line-height будет работать кратно, например line-height: 1.2 будет font-size * 1.2.