Как сделать отступы между буквами в css

Как сделать отступ между словами в css

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

Пример ниже добавит к каждому пробелу дополнительные 15px.

 Добавим к словам дополнительный отступ 

p  word-spacing: 15px; > 

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

normal на усмотрение браузера: при выравнивании текста по ширине дополнительное расстояние может быть отличным от нуля initial normal inherit наследует значение родителя unset наследует значение родителя

Свойство letter-spacing наследуется, применяется ко всем элементам, изменяет текст

  
Свойство letter-spacing наследуется, применяется ко всем элементам, изменяет текст

Что такое letter-spacing

Для каждого шрифта характерен свой промежуток между символами. Положительное значение свойства letter‑spacing добавляет к каждому символу дополнительное расстояние справа, тем самым увеличивая интервал между буквами. В том числе к символам без ширины, например, ⁠ (неразрывный пробел без ширины).

з
заказ
заказ⁠

 div 
з
заказ
заказ⁠

Отрицательное значение, наоборот, уменьшает отступ до следующего символа.

з
заказ
заказ⁠

 div 
з
заказ
заказ⁠

Как выровнять текст по центру или по правому краю с letter-spacing

Данный пункт будет бесполезен, когда браузеры будут выполнять эту рекомендацию w3.org: Letter-spacing must not be applied at the beginning or at the end of a line .

 div 
заказ

 div 
заказ

  
заказ

• font-kerning : межбуквенное расстояние каждой пары букв
• word-spacing : расстояние между словами
• text-indent : красная строка CSS
• line-height : расстояние между строк
• margin и padding : внешний и внутренний отступ до содержимого элемента

Расстояние между буквами, строками, ширина табуляции в CSS

Демонстрация возможностей CSS для настройки расстояний между буквами, строками, табуляции и других свойств шрифтов.

Красная строка

Свойство text-indent устанавливает сдвиг первой строки, цвет первой буквы можно определить свойством :first-letter.

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

Свойство letter-spacing устанавливает интервал между символами. В качестве значений принимаются единицы длины (px, in, pt, em, ex), допустимо отрицательное значение. Лучшая точность получается при использовании em.

Ширина пробелов

Word-spacing задает интервал между словами, значение можно указать в px, in, pt, em, ex.

Ширина табуляции

Свойство tab-size устанавливает ширину табуляции в , , и других элементах со свойством white-space: pre . В качестве значения используется количество символов (по умолчанию 8) или единицы длины.

Свойство пока ещё не стандартизировано W3C, но поддерживается современными браузерами.

Ширина букв

Свойство font-stretch задаёт ширину символов в шрифте, работает только со шрифтами, у которых есть поддержка разных начертаний. Значения задаются константами или процентами:

letter-spacing

Определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данное свойство. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.

Синтаксис

letter-spacing: значение | normal | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Наилучший результат дает использование относительных единиц основанных на размере шрифта (em и ex).

normal Задает интервал между символами как обычно. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

     p 
Duis te feugifacilisi
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства letter-spacing

Объектная модель

[window.]document.getElementById(» elementID «).style.letterSpacing

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .