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

Межбуквенный интервал 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 существует свойство word-spacing положительное значение которого прибавит к текущему пробелу указанное значение, тем самым увеличивая отступ между словами, и отрицательное, соответственно — убавит.

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

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

p  word-spacing: 15px; > 

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 .

letter-spacing

CSS свойство letter-spacing позволяет увеличивать или уменьшать расстояние между буквами в тексте.

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

Примечание: для регулирования расстояний между словами используйте CSS свойство word-spacing, для изменения расстояния между строк — line-height.

Синтаксис

letter-spacing: normal|расстояние|inherit;

Значения свойства