Изменение высоты строки (межстрочного интервала) в тексте
Одним из основных преимуществ использования CSS перед более ста- рыми методами, основанными на применении тегов <font> и т. д., состо- ит в том, что оно дает разработчику больше возможностей управления внешним видом текста на странице. В следующем примере мы попро- буем изменить межстрочный интервал в тексте документа.
Решение
Если межстрочный интервал по умолчанию оказывается слишком ма- леньким, его можно изменить с помощью свойства line-height:
chapter02/leading.css
p {
font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height: 2.0;
}
Результат показан на рис. 2.17.
Проще простого! Единственное, на что стоит обратить внимание, – не стоит задавать слишком большие интервалы, иначе текст будет трудно читать.
Выравнивание текста по ширине 57
Рис. 2.17. Изменение межстрочного интервала с помощью свойства line-height
А как же единицы измерения? Как видите, в данном примере вместо единиц измерения мы использовали коэффициент 2.0. Вы можете задать значение line-height в стандартных единицах измерения CSS, например пикселах или em, однако при этом теряется связь между высотой строки и размером шрифта для дочерних элементов.
К примеру, если бы в предыдущем примере присутствовал элемент span с боль- шим значением свойства font-size, величина межстрочного интервала изме- нялась бы пропорционально размеру шрифта, поскольку свойству line-height для абзаца задано числовое значение 2.0. Однако если бы данному свойству было присвоено значение 2em или 200%, элемент span унаследовал бы действи- тельную, а не пропорциональную величину межстрочного интервала, на кото- рый не повлияет увеличенный размер шрифта. В определенных случаях это, конечно, может оказаться результатом, которого вы добиваетесь.
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- Изменение стиля горизонтальной линии (0)
- Вывод текста заглавными буквами с помощью CSS (0)
- Изменение стиля маркеров списка или удаление маркеров (0)
- Как изменить способ размножения фонового изображения (0)
- Изменение вида курсора (0)
- Удаление пустого пространства между ячейками, появляющегося после добавления рамок (0)
- Подчеркивание заголовков (0)