Уточнение, что именно измеряет размер шрифта CSS

Question

Я читаю CSS полное руководство Эрика Мейера, 3-е издание.

Его раздел о размерах шрифта (стр. 107) гласит, что размер шрифта определяет поле em. Если я сделаю:

span { font-size: 10px; }

Устанавливает ли он точно по горизонтали и вертикали блока em 10 пикселей? Он относится к измерению как к расстоянию между базовыми линиями.

Полагаю, я немного запутался, почему его называют "коробкой", а не просто высотой, если все, что он делает, это измеряет вертикальное расстояние.

Answer 1

«em» доступно как относительная единица измерения при вертикальных или горизонтальных измерениях.

Таким образом, если текущий размер шрифта установлен в 12px, тогда установка margin: 1em для дочернего элемента создаст поле вокруг него в 12px. Если бы вы изменили размер шрифта родительского элемента на 16px, поле также увеличилось бы до 16px.

Answer 2

Прочитайте Размер шрифта: свойство font-size спецификации W3C.

Размер шрифта соответствует em квадрат, понятие, используемое в типографии.