Я продолжу писать о разных свойствах, которые позволяют преобразовывать текст. Сегодня мы посмотрим, как прописать в css расстояние между буквами.
Межбуквенный интервал
Сама по себе настройка достаточно специфическая. Согласитесь, что межбуквенный интервал в обычном тексте и так всех устраивает, так зачем его менять? Но зато эта настройка может пригодиться для стилизации:
- Заголовков
- Пунктов списка
- Текста в цитатах и т.д.
Итак, в css за расстояние между буквами отвечает свойство letter-spacing. Его значение записывается любой единицей длины, которую можно применять в css. Но чаще всего задается в пикселах и относительных единицах em. Кроме этого, свойство имеет еще два значения:
- Normal – задает межбуквенный интервал по умолчанию
- Inherit – наследует значение родительского элемента. Если у родителя стоит 5 пикселей, то у дочернего тоже будет так
Letter-spacing в действии
Свойство можно применять для стилизации заголовков и других текстовых элементов. Например, так выглядит название с заданным интервалом в 7 пикселей.
Интервал увеличен до 25 пикселей
А это letter-spacing: -3px. Видите как сжались буквы.
Также его можно использовать совместно с плавными переходами и псевдоклассом :hover. Таким образом, можно достигнуть эффекта плавного сжимания/расширения слов.
Расстояние между словами
Есть еще одно очень похожее свойство, но оно задает расстояние между словами, а не отдельными буквами. Иногда и оно может вам пригодится. Называется word-spacing, а его значение задается аналогично.
Эти css-свойства поддерживаются всеми версиями браузеров, кроме самых-самых старых, которые уже никто давно не использует. Вот таким вот образом можно прописать в css расстояние между буквами и словами. Подписывайтесь на блог, если вам интересны статьи подобной тематики.