20

Вопрос по CSS. Если задать font-size > line-height, например, font-size: 24px и line-height: 12px, то половинный интервал будет отрицательным (-6px). Не могу представить поведение строчного элемента, когда у него половинный интервал отрицательный.

<p style="font-size: 12px; line-height: 12px;">
    This is text, <em>some of which is emphasized</em>, plus other text<br>
    which is <strong style="font-size: 24px;">strongly emphasized</strong>
    and which is<br>
    larger than the surrounding text.
</p>

В этом примере font-size большей части текста составляет 12px, тогда как текст одного из строковых незамещаемых элементов имеет размер 24px. Однако значение line-height всего текста – 12px, поскольку line-height – это наследуемое свойство. Таким образом, line-height элемента strong – также 12px.

В данном примере для анонимного текста (который не лежит в строчном элементе) и для курсива высота строки равна высоте шрифта (font-size равен line-height, который равен 12px). Для элемента strong ситуация другая.

  1. Не понимаю, почему в данном примере контейнер строки по высоте равен 15 пикселей.

введите сюда описание изображения

Как блочные элементы выкладываются в документ понятно – сверху вниз кладутся прямоугольники-блоки один под другим. При этом надо учитывать поля, рамки и отступы + плавающие элементы.

А вот как это происходит с текстом и текстовыми элементами внутри блока, а они ФОРМИРУЮТ ВЫСОТУ блока в большинстве случаев - мне не понятно. 2. Объясните, пожалуйста, подробно, как строки ВЫКЛАДЫВАЮТСЯ в документ.

В строках есть блоки (не блочные элементы, а просто блоки) - область содержимого (content area), строковый блок (inline box), контейнер строки (line box). Написано в книге Мейера, что "Контейнер строки (line box) - это наименьший блок, охватывающий самую верхнюю и самую нижнюю точки строковых блоков, находящихся в строке. Иначе говоря, верхний край контейнера строки размещается вдоль вер шины самого высокого строкового блока, и низ совпадает с низом строкового блока, расположенного ниже всех." Не понимаю, как получили число 15 пикселей в примере выше. Не понимаю, как выстраиваются строковые блоки внутри контейнера строки.

Мейер в своей книге пишет "Для каждой области содержимого определяем, какая ее часть находится выше базовой линии всей строки и какая ее часть находится под базовой линией. Это непростая задача: должно быть известно положение базовой линии каждого элемента и каждого куска анонимного текста и базовой линии самой строки, затем они все должны быть выстроены в ряд."

Что значит "базовая линия всей строки"? Базовая линия, насколько я понимаю, может быть только у анонимного текста или строкового элемента. А строка – это кусок анонимного текста и/или строчного элемента, которая ВЛЕЗЛА по ширине в блочный элемент-контейнер.

Понял то, что каждая строка лежит в контейнере строки, эти контейнеры ложатся один под другим вплотную.

0

1 ответ 1

19
+50

Размер шрифта – вещь метафорическая. Даже если вы задаете, как у меня в примере 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);
}
<div><span>Some text уЁ</span></div>

Что происходит, когда нужно уложить строки одну над другой? Используется line-height, даже если высоты строк накладываются:

div {
  background: #ccc;
  line-height: 40px;
  font-size: 40px;
}

span {
  background: rgba(0, 0, 0, 0.2);
}
<div><span>Строки накладываются друг на друга, невзирая на высоту</span></div>

Высота блока состоит из line-height х количество строк + padding. Даже если line-height = 0, высота строковых элементов ни на что не влияет, и строки сливаются в одну:

div {
  background: #ccc;
  line-height: 0;
  font-size: 40px;
}

span {
  background: rgba(0, 0, 0, 0.2);
}
<div><span>Строки накладываются друг на друга, невзирая на высоту</span></div>

Что такое базовая линия? Это линия, идущая по нижней границе букв, не имеющих свисающих элементов:

введите сюда описание изображения

Легко увидеть базовую линию, достаточно спозиционировать строчный элемент по этой линии (vertical-align: baseline)

div {
  font-size: 40px;
}

span {
  display: inline-block;
  border-bottom: 1px dotted red;
  width: 70px;
  vertical-align: baseline
}
<div>Ёнудл <span></span></div>

UPD

если в одной строке есть, например, два элемента span, у каждого задан свой vertical-align, то как они выстраиваются?

что такое базовая линия ВСЕЙ строки

По умолчанию, инлайн-блоки выстраиваются по высоте так, чтобы их baseline совпадали.

div {
  font-size: 20px;
  line-height: 30px;
  border: 1px solid blue;
}

span {
  background: rgba(0, 0, 0, 0.2)
}
<div>
  <span>Обычный</span>
  <span style="font-size:30px">Большой</span>
</div>

Если мы используем 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:
<div>
  <span style="vertical-align:top; line-height: 20px;">Верх</span>
  <span style="vertical-align:bottom; line-height: 20px;">Низ</span>
</div>
span line-height: 30px (= line-height контейнера):
<div>
  <span style="vertical-align:top; line-height: 30px;">Верх</span>
  <span style="vertical-align:bottom; line-height: 30px;">Низ</span>
</div>
span line-height: 0px:
<div>
  <span style="vertical-align:top; line-height: 0px;">Верх</span>
  <span style="vertical-align:bottom; line-height: 0px;">Низ</span>
</div>
span line-height: 60px:
<div>
  <span style="vertical-align:top; line-height: 60px;">Верх</span>
  <span style="vertical-align:bottom; line-height: 60px;">Низ</span>
</div>

Как видите, на примерах опять играет роль line-height, а не высота самого текста в блоке. Высота текста фактически нужна только для одного – для отрисовки выделения букв, ну и конечно, если мы укажем line-height относительной величиной (например 1.5 или 150%).

6
  • насчет первого примера. высота дива равна лайн-хайту спана, потому что высота дива равна высоте контейнера данной строки, который равен в данном случае лайн-хайту единственного строчного элемента ( спана)
    – Dimon
    30 янв 2017 в 20:16
  • Мне кажется, в вашей книжке придуманы лишние термины, мне не удалось найти термин «контейнер строки» в интернете. Я считаю, это выдумка автора, пора достать бритву Оккама, чтобы срезать ненужное.
    – Crantisz
    31 янв 2017 в 6:38
  • поищите так: контейнер строки - это line box, строковый блок - inline box. даже в стандарте про них написано
    – Dimon
    31 янв 2017 в 10:57
  • @Dimon Хорошо, значит контейнер строки это типа одна строчка. Тогда я не понимаю, что вам еще не понятно
    – Crantisz
    31 янв 2017 в 11:27
  • Мне не понятно следующее: если в одной строке есть, например, два элемента span (), у каждого задан свой vertical-align, то как они выстраиваются? я не понимаю, то, что написано в самом низу моего вопроса - что такое базовая линия ВСЕЙ строки
    – Dimon
    31 янв 2017 в 11:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.