Межбуквенный интервал 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 : внешний и внутренний отступ до содержимого элемента
letter-spacing
Определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данное свойство. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.
Синтаксис
letter-spacing: значение | normal | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Наилучший результат дает использование относительных единиц основанных на размере шрифта (em и ex).
normal Задает интервал между символами как обычно. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
letter-spacing 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.
| Значение по умолчанию: | normal |
|---|---|
| Применяется: | ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line |
| Анимируется: | да |
| Наследуется: | да |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.letterSpacing=»3px» |
Синтаксис
letter-spacing: normal|расстояние|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| normal | Стандартное расстояние между символами. |
| расстояние | Задает расстояние между символами с помощью единиц измерения, используемых в CSS. Допустимы отрицательные значения. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Как изменить расстояние между словами в css
Изменить расстояние между словами в CSS возможно с помощью свойства word-spacing . Значением по умолчанием является normal . Изменить его мы можем, задав значение в одной из абсолютных ( px ) или относительных ( % , em , rem ) единиц. Например, указав word-spacing: 5px; , мы установим интервал между словами равный 5 пикселям.
Примечание: если для текста задано выравнивание text-align: justify; , то интервал между словами будет установлен в размере, не меньшем значения, указанного в word-spacing .
