Когда вы работаете с текстом, наверняка сталкивались с таким понятием, как межстрочный интервал (или интерлиньяж). Это не просто сухой типографский термин, а важный элемент дизайна, определяющий расстояние между строками. Чтобы понять суть, давайте заглянем в анатомию символа: часть буквы, выступающая ниже базовой линии, известна как нижний выносной элемент, а самая верхняя точка - это верхний выносной элемент. Именно между этими крайними точками соседних строк и измеряется истинный межстрочный интервал.
В мире CSS все упрощается благодаря свойству line-height. Оно задает общую высоту строки, а разница между размером шрифта и этим значением как раз и формирует тот самый интервал. И здесь кроется приятный секрет: чем больше вы увеличиваете значение line-height, тем «воздушнее» и свободнее становится пространство между строками.
Почему это так важно? Потому что правильный межстрочный интервал - это залог комфортного чтения! Глаза устают куда меньше, когда текст не спрессован. К тому же, такое визуальное разделение помогает структурировать контент и выделить смысловые блоки, делая страницу более понятной.
Примечание: по умолчанию во всех браузерах межстрочный интервал равен 120-125% от размера текущего шрифта. Использование отрицательных значений не допускается.
| Значение по умолчанию: | normal |
| Наследуется: | да |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.lineHeight="2" |
| Значение | Описание |
| normal | Стандартный межстрочный интервал. |
| число | Число, которое будет умножено на текущий размер шрифта для определения межстрочного интервала. |
| высота | Высота задется с помощью единиц измерения, использующихся в CSS. |
| % | Высота межстрочного интервала в процентах от текущего размера шрифта. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример