В продолжение прошлой темы, в данном CSS уроке мы учимся управлять расстоянием между словами, и в этом нам поможет свойство word-spacing. Честно признаюсь, я не сторонник ярой настройки расстояний между словами и буквами, потому как параметры по умолчанию обычно бывают достаточно приемлемыми. Тем не менее бывают случаи, когда нужно уменьшить или увеличить интервал между словами. Благо, в этом нет ничего сложного, в чем вы сейчас и убедитесь.

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

Свойство word-spacing

Используя этот параметр, мы можем как увеличивать, так и уменьшать расстояние между словами. Например, давайте во всех абзацах растянем интервал на 15 пикселей.

p { word-spacing: 15px; }

Теперь, текст на веб-странице стал более свободным и степенным. Могу сказать, что на практике такая тонкая настройка бывает необходима не так часто. И еще, я бы хотел отметить, что если используется выравнивание текста со значением justify, то параметр свойства word-spacing может не применяться. Однако, в этом случае расстояние между словами будет не меньше заданной величины.

Уменьшение расстояния между словами

Мы также можем двигаться в сторону уменьшения, используя отрицательные значения. Например, для сокращения расстояния в абзацах на 5 пикселей, мы создаем следующий стиль:

p { word-spacing: -5px; }

Как видите, все довольно просто. А на этом у меня все. Смею предположить что вам все понятно, если нет — задавайте свои вопросы в комментариях. Надеюсь, данный урок по CSS был для вас полезен. Если это так:

  • Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
  • Подписывайтесь на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Вы можете использовать следующие теги HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

14 + 10 =

Закрыть