Как выстраиваются строковые блоки внутри контейнера строки?
1,00
р.
Вопрос по CSS. Если задать font-size > line-height, например, font-size: 24px и line-height: 12px, то половинный интервал будет отрицательным (-6px). Не могу представить поведение строчного элемента, когда у него половинный интервал отрицательный.
В этом примере font-size большей части текста составляет 12px, тогда как текст одного из строковых незамещаемых элементов имеет размер 24px. Однако значение line-height всего текста – 12px, поскольку line-height – это наследуемое свойство. Таким образом, line-height элемента strong – также 12px.
В данном примере для анонимного текста (который не лежит в строчном элементе) и для курсива высота строки равна высоте шрифта (font-size равен line-height, который равен 12px). Для элемента strong ситуация другая.
Не понимаю, почему в данном примере контейнер строки по высоте равен 15 пикселей.
Как блочные элементы выкладываются в документ понятно – сверху вниз кладутся прямоугольники-блоки один под другим. При этом надо учитывать поля, рамки и отступы + плавающие элементы.
А вот как это происходит с текстом и текстовыми элементами внутри блока, а они ФОРМИРУЮТ ВЫСОТУ блока в большинстве случаев - мне не понятно. 2. Объясните, пожалуйста, подробно, как строки ВЫКЛАДЫВАЮТСЯ в документ.
В строках есть блоки (не блочные элементы, а просто блоки) - область содержимого (content area), строковый блок (inline box), контейнер строки (line box). Написано в книге Мейера, что "Контейнер строки (line box) - это наименьший блок, охватывающий самую верхнюю и самую нижнюю точки строковых блоков, находящихся в строке. Иначе говоря, верхний край контейнера строки размещается вдоль вер шины самого высокого строкового блока, и низ совпадает с низом строкового блока, расположенного ниже всех." Не понимаю, как получили число 15 пикселей в примере выше. Не понимаю, как выстраиваются строковые блоки внутри контейнера строки.
Мейер в своей книге пишет "Для каждой области содержимого определяем, какая ее часть находится выше базовой линии всей строки и какая ее часть находится под базовой линией. Это непростая задача: должно быть известно положение базовой линии каждого элемента и каждого куска анонимного текста и базовой линии самой строки, затем они все должны быть выстроены в ряд."
Что значит "базовая линия всей строки"? Базовая линия, насколько я понимаю, может быть только у анонимного текста или строкового элемента. А строка – это кусок анонимного текста и/или строчного элемента, которая ВЛЕЗЛА по ширине в блочный элемент-контейнер.
Понял то, что каждая строка лежит в контейнере строки, эти контейнеры ложатся один под другим вплотную.
Ответ
Размер шрифта – вещь метафорическая. Даже если вы задаете, как у меня в примере line-height:40px font-size:40px , высота шрифта будет больше.
Почему? Потому что по традиции высота шрифта рассчитывается от верхней точки прописной буквы типа Н до нижней точки буквы у. Легко представить, что буква Ё будет выше, поэтому шрифты резервируют себе немного больше места.
Разделите в своем сознании строковый элемент и блоковый элемент: у них разные свойства.
Смотрите пример: Высота div блокового элемента соответствует line-height, однако строковый элемент немного больше, он соответствует настоящей высоте шрифта.
div { background: #ccc line-height: 40px font-size: 40px } span { background: rgba(0, 0, 0, 0.2) }
Что происходит, когда нужно уложить строки одну над другой? Используется line-height, даже если высоты строк накладываются:
div { background: #ccc line-height: 40px font-size: 40px } span { background: rgba(0, 0, 0, 0.2) }
Высота блока состоит из line-height х количество строк + padding. Даже если line-height = 0, высота строковых элементов ни на что не влияет, и строки сливаются в одну:
div { background: #ccc line-height: 0 font-size: 40px } span { background: rgba(0, 0, 0, 0.2) }
Что такое базовая линия? Это линия, идущая по нижней границе букв, не имеющих свисающих элементов:
Легко увидеть базовую линию, достаточно спозиционировать строчный элемент по этой линии (vertical-align: baseline)
div { font-size: 40px } span { display: inline-block border-bottom: 1px dotted red width: 70px vertical-align: baseline }
UPD
если в одной строке есть, например, два элемента span, у каждого задан свой vertical-align, то как они выстраиваются? что такое базовая линия ВСЕЙ строки
По умолчанию, инлайн-блоки выстраиваются по высоте так, чтобы их baseline совпадали.
div { font-size: 20px line-height: 30px border: 1px solid blue } span { background: rgba(0, 0, 0, 0.2) }
Если мы используем vertical-align: top или bottom, элементы прибиваются к верхнему или нижнему краю строки. Но мы должны знать, если line-height инлайн-блока будет равно line-height строки, то это ни на что не повлияет, т.к. верхняя и нижняя границы блоков и так совпадают. Кроме того, если line-height инлайн-блока будет больше, то line-height строки тоже увеличится:
div { font-size: 20px line-height: 30px border: 1px solid blue } span { background: rgba(0, 0, 0, 0.2) } span line-height: 20px:
Как видите, на примерах опять играет роль line-height, а не высота самого текста в блоке. Высота текста фактически нужна только для одного – для отрисовки выделения букв, ну и конечно, если мы укажем line-height относительной величиной (например 1.5 или 150%).
This is text, some of which is emphasized, plus other text
which is strongly emphasized and which is
larger than the surrounding text.
В этом примере font-size большей части текста составляет 12px, тогда как текст одного из строковых незамещаемых элементов имеет размер 24px. Однако значение line-height всего текста – 12px, поскольку line-height – это наследуемое свойство. Таким образом, line-height элемента strong – также 12px.
В данном примере для анонимного текста (который не лежит в строчном элементе) и для курсива высота строки равна высоте шрифта (font-size равен line-height, который равен 12px). Для элемента strong ситуация другая.
Не понимаю, почему в данном примере контейнер строки по высоте равен 15 пикселей.
Как блочные элементы выкладываются в документ понятно – сверху вниз кладутся прямоугольники-блоки один под другим. При этом надо учитывать поля, рамки и отступы + плавающие элементы.
А вот как это происходит с текстом и текстовыми элементами внутри блока, а они ФОРМИРУЮТ ВЫСОТУ блока в большинстве случаев - мне не понятно. 2. Объясните, пожалуйста, подробно, как строки ВЫКЛАДЫВАЮТСЯ в документ.
В строках есть блоки (не блочные элементы, а просто блоки) - область содержимого (content area), строковый блок (inline box), контейнер строки (line box). Написано в книге Мейера, что "Контейнер строки (line box) - это наименьший блок, охватывающий самую верхнюю и самую нижнюю точки строковых блоков, находящихся в строке. Иначе говоря, верхний край контейнера строки размещается вдоль вер шины самого высокого строкового блока, и низ совпадает с низом строкового блока, расположенного ниже всех." Не понимаю, как получили число 15 пикселей в примере выше. Не понимаю, как выстраиваются строковые блоки внутри контейнера строки.
Мейер в своей книге пишет "Для каждой области содержимого определяем, какая ее часть находится выше базовой линии всей строки и какая ее часть находится под базовой линией. Это непростая задача: должно быть известно положение базовой линии каждого элемента и каждого куска анонимного текста и базовой линии самой строки, затем они все должны быть выстроены в ряд."
Что значит "базовая линия всей строки"? Базовая линия, насколько я понимаю, может быть только у анонимного текста или строкового элемента. А строка – это кусок анонимного текста и/или строчного элемента, которая ВЛЕЗЛА по ширине в блочный элемент-контейнер.
Понял то, что каждая строка лежит в контейнере строки, эти контейнеры ложатся один под другим вплотную.
Ответ
Размер шрифта – вещь метафорическая. Даже если вы задаете, как у меня в примере line-height:40px font-size:40px , высота шрифта будет больше.
Почему? Потому что по традиции высота шрифта рассчитывается от верхней точки прописной буквы типа Н до нижней точки буквы у. Легко представить, что буква Ё будет выше, поэтому шрифты резервируют себе немного больше места.
Разделите в своем сознании строковый элемент и блоковый элемент: у них разные свойства.
Смотрите пример: Высота div блокового элемента соответствует line-height, однако строковый элемент немного больше, он соответствует настоящей высоте шрифта.
div { background: #ccc line-height: 40px font-size: 40px } span { background: rgba(0, 0, 0, 0.2) }
Some text уЁ
Что происходит, когда нужно уложить строки одну над другой? Используется line-height, даже если высоты строк накладываются:
div { background: #ccc line-height: 40px font-size: 40px } span { background: rgba(0, 0, 0, 0.2) }
Строки накладываются друг на друга, невзирая на высоту
Высота блока состоит из line-height х количество строк + padding. Даже если line-height = 0, высота строковых элементов ни на что не влияет, и строки сливаются в одну:
div { background: #ccc line-height: 0 font-size: 40px } span { background: rgba(0, 0, 0, 0.2) }
Строки накладываются друг на друга, невзирая на высоту
Что такое базовая линия? Это линия, идущая по нижней границе букв, не имеющих свисающих элементов:
Легко увидеть базовую линию, достаточно спозиционировать строчный элемент по этой линии (vertical-align: baseline)
div { font-size: 40px } span { display: inline-block border-bottom: 1px dotted red width: 70px vertical-align: baseline }
Ёнудл
UPD
если в одной строке есть, например, два элемента span, у каждого задан свой vertical-align, то как они выстраиваются? что такое базовая линия ВСЕЙ строки
По умолчанию, инлайн-блоки выстраиваются по высоте так, чтобы их baseline совпадали.
div { font-size: 20px line-height: 30px border: 1px solid blue } span { background: rgba(0, 0, 0, 0.2) }
Обычный Большой
Если мы используем vertical-align: top или bottom, элементы прибиваются к верхнему или нижнему краю строки. Но мы должны знать, если line-height инлайн-блока будет равно line-height строки, то это ни на что не повлияет, т.к. верхняя и нижняя границы блоков и так совпадают. Кроме того, если line-height инлайн-блока будет больше, то line-height строки тоже увеличится:
div { font-size: 20px line-height: 30px border: 1px solid blue } span { background: rgba(0, 0, 0, 0.2) } span line-height: 20px:
Верх Низ
span line-height: 30px (= line-height контейнера): Верх Низ
span line-height: 0px: Верх Низ
span line-height: 60px: Верх Низ
Как видите, на примерах опять играет роль line-height, а не высота самого текста в блоке. Высота текста фактически нужна только для одного – для отрисовки выделения букв, ну и конечно, если мы укажем line-height относительной величиной (например 1.5 или 150%).
