Как настроить межстрочный интервал в CSS?

Текст на сегодняшний день все так же является основным видом передаваемой информации на просторах Всемирной паутины. Поэтому управлению его внешним видом уделяется отдельное внимание. Одной важной характеристикой текста является межстрочный интервал, который определяет расстояние между строчками. Если вы никогда не встречались с этим правилом, то наверняка никогда не работали с CSS. Ведь именно этот язык стилей предоставляет доступные команды для изменения всех важных внешних характеристик текста. Такое правило поддерживается всеми современными браузерами и входит в стандарт всех версий каскадных таблиц стилей (CSS: Cascading Style Sheets).

Правило

В CSS межстрочный интервал устанавливается при помощи простой команды line-height. Запись производится в обычном порядке. В качестве значения можно назначить любое неотрицательное число. Если будет указано: «line-height: -4px-», то команда будет проигнорирована. Можно указать значение: «normal» или «inherit». Первое будет использовать автоматическую настройку интервала, которая определяется в зависимости от типа и размера выбранного шрифта. В этом случае расстояние между строчками устанавливает сам браузер. Межстрочный интервал может принимать значение, унаследованное у тегов «родителей» с помощью значения «inherit».

Видео: CSS урок 17. Межстрочный интервал

Значение

Все значения, отличные от стандартных команд, можно разделить на две категории: относительные и абсолютные. Межстрочный интервал CSS позволяет гибко управлять расстоянием между строками, используя различные и более удобные способы настройки. К абсолютным значениям относят все известные единицы длины, которые применяются в CSS. В этот список входят: in (дюймы), pt (пункты), px (пиксели) и другие. Отсчет интервала производится от базовой линии шрифта. Если записать правило: «line-height: 10px-», то межстрочное расстояние будет всегда равняться 10 пикселям. Такой способ идеально подходит, когда необходимо указать точный интервал для определенного шрифта. Но не забывайте, что у всех разное расширение экрана. И если у вас такое расстояние выглядит отлично, то это не означает, что у всех будет такой же эффект. Например, на мобильных устройствах большой межстрочный интервал может вызвать огромные неудобства.

Видео: расстояние между строками CSS

Относительные величины

Для решения проблемы с разным расширением экрана можно использовать относительные величины. Чаще всего используется процентное выражение. Значение в таком случае устанавливается относительно высоты шрифта. Например, указав «line-height: 150%-», мы получим интервал, наполовину больший средней буквы. За 100% принимается высота используемого шрифта. Большинство опытных разработчиков рекомендуют использовать именно относительные величины. Так вы избавите себя и своих пользователей от проблем, связанных с различным расширением экрана.

Заключение

Видео: Настройка документа MS Office Word 2010

Если вы используете нестандартный набор шрифтов, и вам важен именно строго определенный межстрочный интервал, выбирайте абсолютные значения. Во всех остальных случаях желательно устанавливать процентное свойство. Когда нужно сделать индивидуальный интервал для отдельного участка документа, воспользуйтесь id-метками, или селекторами. Таким образом, вам не нужно будет устанавливать межстрочное расстояние для всего документа.