line-height

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

Свойство line-height устанавливает интерлиньяж строки, т.е. попросту её высоту, а само состоит из  высоты кегельной площадки + half-leading-ов (о них позже). Рассмотрим по порядку, как это действует.

line-height для текста

Начнем с простейшего случая: пусть наша строка состоит из единственного инлайнового бокса, представляющего собой обычный текст, набранный одним шрифтом одного размера.

Сразу пример: 

<p> Свойство line-height - устанавливает интерлиньяж строки </p>

	p {
		border: 1px solid #000;
		background: #F90;
		font-size: 30px;
		line-height: 200px;
		padding-left: 20px;
	}

А вот как это выглядит:

Как я и говорил, внутри параграфа находится обычный текст. Но, на самом деле, весь оранжевый блок — это и есть лайн-бокс, и как можно заметить, его высота прилично превышает высоту самого текста. Размер шрифта я выставил 30px, а шрифт я даже не стал трогать, и значит, весь текст состоит из одного шрифта, да к тому же простого, не экзотического. Следовательно, можно взять высоту по максимуму из всех площадок, которая может составлять… думаю, не больше 50px (и то вряд ли). line-height я выставил в 200px, и если отнять от этой цифры размер максимальной площадки (50px), то остаётся 150px, но простите, а куда они тогда делись? Что бы это понять, нужно углубиться и разобрать все составляющие line-height.

leading (междустрочие)

В старые времена leading-ом считались свинцовые бруски, которые прокладывали между рядами литер металлического набора, т.е. добавочная высота "свинцовых полосок", отсюда leading, от lead — свинец. Именно с помощью них в старые времена в типографиях раздвигали строки. Но вот в Вебе leading-ом принято считать математическую разность заданного line-height-а и высоты кегля. Но, если говорить уже знакомым нам языком, то leading — это разность line-height-а и самой большой площадки, которые отрендерились font-size'ом и метриками шрифта, о которых мы говорили выше.

А теперь вернёмся к нашему примеру. Мы допустили, что максимальная высота самой высокой площадки составляет 50px, а разность line-height-а и высоты этой площадки получилась 150px. Вот последняя цифра и будет тем самым leading-ом, добавочным "бруском".

Да, но, вы можете задать вопрос: "А почему же тогда текст находится посередине лайн-бокса?". Всё дело в том, что на самом деле leading делится на две равные части, а каждая часть называется "half-leading", что в переводе означает «половина междустрочия». И вот, как раз таки, к каждой стороне высоких площадок и прибавляется вот по такому half-leading-у. В нашем случае вышло, что к каждой стороне прибавилось по 75px, вот почему текст выровнялся посередине.

Я предлагаю рассмотреть эту ситуацию прямо на нашем примере:

На рисунке можно увидеть, из чего состоит высота строки: half-leading (75px) + font-size (50px) + half-leading (75px). Это и есть наш line-height. 

Отрицательный leading

До этого момента мы разобрали ситуацию, когда line-height больше, чем размер шрифта, но что, например, произойдёт, если line-height окажется меньше? Именно на этот вопрос мы и должны ответить прямо сейчас.

Давайте рассмотрим  конкретный пример.

<p>  line-height = font-size  + (half-leading * 2) </p>

p {
	border: 1px solid #000;
	background: #F90;
	font-size: 30px;
	line-height: 10px;
	padding-left: 20px;
}

А вот результат:

 

Если предположить, что самая большая площадка по высоте составляет 30px, а line-height равен 10px, то высота строки в нашем случае будет равна именно десяти пикселям. Почему?  А дело в том, что в такой ситуации leading начинает работать в обратную сторону, т.е. попросту становится отрицательным, а так как он состоит из двух частей (half-leading*2), то уменьшаться, по сути, начинают именно последние. Ну, и, конечно же, высота укорачивается с двух сторон в абсолютно одинаковой степени. Например, в нашем случае, half-leading-и составляют по —10px (+-), так как шрифт установлен в 30, а line-height в 10.

leading можно сравнить с полями (margin), только последние делают отступы снаружи элемента, а leading снаружи самой высокой площадки в строке. Как и margin, leading тоже может быть отрицательным, но самое интересное то, что в итоге line-height будет всё равно равен конечному результату. Наш пример можно трактовать как: line-height = 30 + (-10 * 2).

Мы выяснили, что делая значение line-height меньше размера шрифта, на самом деле мы делаем отрицательным leading и уменьшаем именно его, за счёт чего вычисляется итоговая высота строки. Но есть ли какие-нибудь ограничения?  Да, есть. На самом деле отрицательный leading не может быть больше высоты самой высокой площадки в строке. Т.е, если, например, размер шрифта составляет 30px, то half-leading-и с двух сторон могут быть максимум по -15px каждый. Что и логично, ведь посудите сами, мы же не можем вывернуть строку наизнанку и сделать  line-height равным:-1, -2 и т.д.

Другими словами,  half-leading-и не могут отобрать от высоты строки больше, чем по половине, и минимальный теоретический предел высоты строки — ноль. На практике он может быть еще больше, стандарт разрешает браузерам иметь "свое мнение" по этому поводу. Например, совсем недавно Webkit-браузеры не позволяли сжать высоту строки меньше высоты строчных букв.

Отрицательный leading и более одной строки

Учитывая, что из-за отрицательного leading -а высота строки становится меньше содержимого (в нашем случае текста), нужно учитывать ещё и то, что эта особенность может навредить в тех моментах, когда строк становится две или больше.

По традиции, сразу приведу пример:

<p> Свойство line-height - устанавливает интерлиньяж строки,
 т.е. попросту её высоту</p>

	p {
		border: 1px solid #000;
		background: #F90;
		font-size: 30px;
		line-height: 10px;
		padding-left: 20px;
	}

Ну, и конечно же сам результат:

По результату можно сделать вывод, что вторая строка началась раньше, чем закончилась первая, а точнее раньше чем закончилась высота текста в первой строке. Такое поведение легко объясняется тем, что фактическая высота строки составляет всего 10px, и содержимое строк вынуждено подстраиваться под этот размер. В связи с чем происходит наложение второй строки на первую, третьей на вторую и т.д.

Другие публикации цикла

1. Введение в инлайновый контекст форматирования (ИКФ): основные понятия (1-я публикация цикла “Тайны CSS2.1″).

2. Введение в инлайновый контекст форматирования (ИКФ): основные понятия (2-я публикация цикла “Тайны CSS2.1″).

3. ИКФ: высота строки, часть 1 (3-я публикация цикла “Тайны CSS2.1″).

5. ИКФ: высота строки, часть 3 (5-я публикация цикла “Тайны CSS2.1″).

6. ИКФ: высота строки, часть 4 (6-я публикация цикла “Тайны CSS2.1″).

7. ИКФ: высота строки, часть 5 (7-я публикация цикла “Тайны CSS2.1″).

8. ИКФ: Вертикальное выравнивание в строке, часть 1 (8-я публикация цикла “Тайны CSS2.1″).

9. ИКФ: Вертикальное выравнивание в строке, часть 2 (9-я публикация цикла “Тайны CSS2.1″).

10. ИКФ: Вертикальное выравнивание в строке, часть 3 (10-я публикация цикла “Тайны CSS2.1″).

11. ИКФ: Горизонтальное выравнивание, часть 1 (11-я публикация цикла “Тайны CSS2.1″).

12. ИКФ: Горизонтальное выравнивание, часть 2 (12-я публикация цикла “Тайны CSS2.1″).

Нам необходимы ваши конструктивные коментарии в наших статьях! Пожалуйста, не проходите мимо.

P.S. Это тоже может быть интересно:

• CSS-выражения от контейнера для дизайнеров
• «Родительскому селектору» :has(), скорее всего, запретят быть вложенным
• Как читать W3C-спецификации