Как задать в css расстояние между буквами

Я продолжу писать о разных свойствах, которые позволяют преобразовывать текст. Сегодня мы посмотрим, как прописать в css расстояние между буквами.

Межбуквенный интервал

Сама по себе настройка достаточно специфическая. Согласитесь, что межбуквенный интервал в обычном тексте и так всех устраивает, так зачем его менять? Но зато эта настройка может пригодиться для стилизации:

  • Заголовков
  • Пунктов списка
  • Текста в цитатах и т.д.

Итак, в css за расстояние между буквами отвечает свойство letter-spacing. Его значение записывается любой единицей длины, которую можно применять в css. Но чаще всего задается в пикселах и относительных единицах em. Кроме этого, свойство имеет еще два значения:

  • Normal – задает межбуквенный интервал по умолчанию
  • Inherit – наследует значение родительского элемента. Если у родителя стоит 5 пикселей, то у дочернего тоже будет так

Letter-spacing в действии

Свойство можно применять для стилизации заголовков и других текстовых элементов. Например, так выглядит название с заданным интервалом в 7 пикселей.css расстояние между буквами 7 пикселей

Интервал увеличен до 25 пикселей
css расстояние между буквами 25 пикселей

А это letter-spacing: -3px. Видите как сжались буквы.отрицательный межбуквенный интервал

Также его можно использовать совместно с плавными переходами и псевдоклассом :hover. Таким образом, можно достигнуть эффекта плавного сжимания/расширения слов.

Расстояние между словами

Есть еще одно очень похожее свойство, но оно задает расстояние между словами, а не отдельными буквами. Иногда и оно может вам пригодится. Называется word-spacing, а его значение задается аналогично.

Эти css-свойства поддерживаются всеми версиями браузеров, кроме самых-самых старых, которые уже никто давно не использует. Вот таким вот образом можно прописать в css расстояние между буквами и словами. Подписывайтесь на блог, если вам интересны статьи подобной тематики.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: