Почему высота строчного элемента 26 пикселей, хотя font-size равен 24 пикселя?

#css #css3

Привет.

Вопрос по CSS. Я написал Ёу
, а потом открыл девтулс и выдели этот строчный элемент. Получил это:




Не понимаю, что это за выделенная область? Что за 26 пикселей, когда я указал 24
пикселя?. У строчного элемента есть строчный блок (равен высоте line-height), есть
область содержимого (равна font-size), есть контейнер строки.


Модель 1




У элемента есть область содержимого - это из модели контейнеров. Насколько я понимаю,
на строчные элементы модель контейнеров тоже распространяется, так как  можно те же
margin, border, padding задать для строчного элемента. Как эти две модели взаимодействуют?


Модель 2



У модели контейнеров есть "область содержимого" и у модели чисто строчных элементов
есть область содержимого (ее высота определяется как font-size).
    

Ответы

Ответ 1

Дело в line-height(межстрочный интервал), посмотрите в девтулс сколько задана для
для этого элемента должно быть line-height: 1.3;(зависит от вида и размера шрифта)
Почитайте line-height


Ответ 2

Свойство font-size задает размер кегля по вертикали. line-height- это 120 процентов
от font-size (https://developer.mozilla.org/en-US/docs/Web/CSS/line-height).  





То, какой высоты будет символ при этом вертикальном размере кегля , определяет изготовитель
шрифта.


Ответ 3

Свойство font-size задает размер кегельного квадрата по высоте.
Потом берется шрифт, который соответствует этому кегельному квадрату по высоте. Глифы
шрифта могу по высоте вылезать за эти кегельные квадраты.
В девтулсе синим выделяется область содержимого (content area) строчного элемента.
Это прямоугольник. Согласно книге Эрика Мейера "CSS", в стандарте CSS 2.1 (страница
216 книги) есть два варианта того, как образуется content area:
а) В своей книге он выбрал для простоты вариант, когда content area по высоте определяется
размерами кегельных площадок по высоте, которое определяется, как уже написал, свойством
font-size.
б) content area - это самый маленький прямоугольник, который охватывает все глифы
строки по высоте. В браузерах используется именно этот метод определения content area.
Глифы шрифта больше, чем кегельная площадка (которую определяет font-size), поэтому
content-area (наименьший прямоугольник, который охватывает глифы) больше, чем font-size