Привет.
1. Первый вопрос по CSS. Если задать font-size>line-height, например, font-size:24px и line-height:12px, то половинный интервал будет отрицательным (-6px). не могу представить поведение строчного элемента, когда у него половинный интервал отрицательный.
<p style="fontsize: 12px; lineheight: 12px;">
This is text, <em>some of which is emphasized</em>, plus other text<br>
which is <strong style="fontsize: 24px;">strongly emphasized</strong>
and which is<br>
larger than the surrounding text.
</p>
Не понимаю, почему в данном примере контейнер строки по высоте равен 15 пикселей (источник - книга Мейера по CSS, стр 220).
Как блочные элементы выкладываются в документ понятно - сверху вниз кладутся прямоугольники-блоки один под другим. При этом надо учитывать поля, рамки и отступы + плавающие элементы.
А вот как это происходит с текстом и текстовыми элементами внутри блока, а они ФОРМИРУЮТ ВЫСОТУ блока в большинстве случаев - мне не понятно.
В строках есть блоки (не блочные элементы, а просто блоки) - область содержимого (content area), строковый блок (inline box), контейнер строки (line box). Написано в книге Мейера, что "Контейнер строки (line box) - это наименьший блок, охватывающий самую верхнюю и самую нижнюю точки строковых блоков, находящихся в строке. Иначе говоря, верхний край контейнера строки размещается вдоль вер шины самого высокого строкового блока, и низ совпадает с низом строкового блока, расположенного ниже всех." Не понимаю, как получили число 15 пикселей в примере выше. Не понимаю, как выстраиваются строковые блоки внутри контейнера строки. Понял только то, что каждая строка лежит в контейнере строки, эти контейнеры ложатся один под другим в плотную.
2. Второй вопрос по CSS.
Я написал <strong style="font-size: 24px;font-family:arial;">Ёу</strong> , а потом открыл девтулс и выдели этот строчный элемент. Получил это
:
Не понимаю, что это за выделенная область? Что за 26 пикселей, когда я указал 24 пикселя?.
У строчного элемента есть строчный блок (равен высоте line-height), есть область содержимого (равна font-size), есть контейнер строки.
Модель 1.
Модель 2
У элемента есть область содержимого - это из модели контейнеров. Насколько я понимаю, на строчные элементы модель контейнеров тоже распространяется, так как можно те же margin, border, padding задать для строчного элемента. У модели контейнеров есть "область содержимого" и у модели чисто строчных элементов есть область содержимого. Как эти две модели взаимодействуют?