Как выстраиваются строковые блоки внутри контейнера строки?

[DimonQwertyevich]

Привет.

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 задать для строчного элемента. У модели контейнеров есть "область содержимого" и у модели чисто строчных элементов есть область содержимого. Как эти две модели взаимодействуют?

 

 

 

[andrey7287]

1. font-size и  line-height не правильно написаны.

2.  Запас под выносные елементы, такие как точки у буквы ё

PS  margin у инлайн элементов нет. Взаимодействуют в общем то нормально, что конкретно не понятно ?

 

[DimonQwertyevich]

1. В строковом контейнере лежат строковые блоки. габариты по высоте строковых блоков определяют высоту строкового контейнера. не понимаю то, как выстраиваются строковые блоки - относительно каких линий они выстраиваются. Мейер пишет в книге "должно быть известно положение базовой линии каждого элемента и каждого куска анонимного текста и базовой линии самой строки, затем они все должны быть выстроены в ряд". объясните, пожалуйста, на примере с картинкой. чтобы было понятно.

2. У инлайн элементов есть поля, отступы и рамка. По вертикали поля, отступы и рамка просто не учитываются другими строковыми элементами и анонимным текстом (отступ может перекрыть часть нижележащих строк), а по горизонтали поля, отступы и рамка нормально работают. Не понимаю то, как две модели, которые на двух последних рисунках изображены, сочетаются друг с другом - есть коробочная модель (поля, отступы и рамка + содержимое) ,а есть модель с областью содержимого, строковым блоком.

[andrey7287]

6 часов назад, DimonQwertyevich сказал:

не понимаю то, как выстраиваются строковые блоки - относительно каких линий они выстраиваются.

 По умолчанию - baseline, нижняя граница текста без учета выносных элементов. На вашей картинке это нижний край букв в словах 'which' и букв 'stron' в слове 'strongly'

6 часов назад, DimonQwertyevich сказал:

Не понимаю то, как две модели, которые на двух последних рисунках изображены, сочетаются друг с другом

Не хочется вас расстраивать, но есть ещё модель сочетающая в себе свойства обоих.  

Edited January 28, 2017 by andrey7287

[DimonQwertyevich]

1. много читал про vertical-align. я знаю, что по умолчанию у любого элемента в документе стоит vertical-align:baseline.

Пишут, что "У свойства vertical-align, которое управляет вертикальным расположением элемента, есть два режима работы.В таблицах свойство vertical-align указывает расположение содержимого ячейки.Его возможные значения:1. baseline - Значение по умолчанию.2. middle, top, bottom - Располагать содержимое посередине, вверху, внизу ячейки.Для инлайновых элементов (display:inline/inline-block), включая картинки, свойство vertical-align центрирует сам инлайн-элемент в окружающем его тексте."

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

2. "есть ещё модель сочетающая в себе свойства обоих"  - не встречал такую модель. Вы можете ссылку дать?

Edited January 28, 2017 by DimonQwertyevich