Высота строки и строчные элементы: более глубокое погружение

Понимание поведения высоты строки во строчных элементах может оказаться загадочным. Несмотря на тщательные исследования, некоторые ключевые аспекты остаются неясными. Это руководство углубляет тему и дает ответы на следующие вопросы:

1. Несоответствие между размером шрифта и измеренной высотой:

Встроенный элемент с размером шрифта 15 пикселей отображает высоту 18 пикселей в инструментах разработчика браузера. Это происходит потому, что:

• Высота встроенного блока: Свойство line-height определяет высоту встроенного блока, который включает в себя все глифы и их полуинтерлиньяжи с каждой стороны. В данном случае высота поля составляет 15 пикселей.
• Высота области содержимого: Инструменты разработчика сообщают высоту области содержимого, которая обычно превышает высоту строки из-за различий в размерах символов. внутри шрифта.

2. Цвет фона не соответствует высоте строки:

Цвет фона встроенного элемента не совпадает с высотой строки, потому что:

• Высота линейного блока: Помимо встроенных блоков, существуют также линейные блоки. Высота линейного блока определяется высотой строки и включает только те встроенные блоки, которые имеют одинаковую высоту строки и вертикальное выравнивание. В этом примере высота поля строки также равна 15 пикселей.
• Высота области содержимого: К области содержимого применяется цвет фона, который соответствует высоте самого высокого глифа в используемом шрифт и размер. Это значение может варьироваться в зависимости от характеристик шрифта и не связано напрямую с высотой строки.

Примечание: Спецификация CSS явно не определяет алгоритм расчета области содержимого. высоту, оставляя это на усмотрение пользовательских агентов.