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

В данной статье мы рассмотрим некоторые способы управления элементами текста с помощью CSS интервалов.

При добавлении текста на html страницу сайта мы используем блочные теги, как правило, это  DIV или P блоки.

Как правило, нас вполне устраивают настройки вывода текстового контента на страницы наших сайтов, с помощью DIV и P блоков  заданных в таблице стилей по умолчанию.

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

Вот в этом случае нам поможет использование свойств CSS интервалов.

Для того, чтобы рассмотреть работу CSS интервалов на практических примерах, давайте создадим файл, например с именем css-space.html и добавим в него обязательные html теги:

Теперь мы готовы на реальных примерах посмотреть, какие виды интервалов можно задавать в тексте и как задание CSS интервалов можно использовать для форматирования текста на страницах сайта.

Итак, рассмотрим первый стиль задания интервала:  letter-spacing, который определяет интервал между символами блока. Добавим на нашу экспериментальную страницу (между тегами body) следующий код:

Данным кодом мы вывели на страницу браузера пять div блоков, причем стилем letter-spacing в блоках, мы задаем интервал между символами текста, который добавлен в блок.

Интервал между символами текста, в каждом из блоков, разный и изменяется этот интервал с помощью параметра стиля letter-spacing.

В зависимости от значения параметра, которое задано в пикселах, мы можем задавать различный интервал между символами текста, размещенного в div блоке,  что хорошо видно на изображении:

Обратите внимание на две нижних строки, как видите, параметр стиля letter-spacing, может принимать отрицательные значения, в результате символы могут наезжать друг на друга.

Следующий тип интервалов, который мы рассмотрим, это интервал между словами в блоке. Данный стиль так и называется: word-spacing.  Как работает данный стиль, посмотрим на примере следующего кода, который тоже давайте добавим в наш экспериментальный файл:

После добавления такого html кода, мы увидим, что в разных блоках расстояние между словами будет меняться в соответствии со значением параметра стиля  word-spacing, который задается в пикселах:

Ну а теперь рассмотрим пример использования более распространенного стиля: line-height, который  определяет на странице сайта интервал между строками.

Для этого, добавим на нашу экспериментальную страницу следующий код:

В нашем примере, в двух блоках  мы используем стиль line-height, с разными параметрами, в первом случае параметр равен  1.5, во втором 2.5.

В случае использования стиля line-height,  межстрочный интервал может задаваться значениями, выраженными коэффициентом, в пикселах,  в процентах, и др.

Если мы откроем наш экспериментальный файл браузером, то увидим, что интервал между строками в первом и втором блоке отличаются в соответствии со значением коэффициента, заданного для стиля line-height:

Стоит отметить, что для всех стилей, которые мы рассмотрели в данной статье, единицы измерения используемых параметров, могут быть любые, разрешенные в CSS. Можно использовать пикселы (px), пункты (pt) дюймы (in) проценты (%) и так далее.

HTML файл, на примере которого мы смотрели, как работают CSS интервалы, Вы можете скачать по ссылке: Скачать файл css-space.html

Автор: Виктор Милованов