КодSEOБлогИное

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

letter-spacing

на усмотрение браузера: при выравнивании текста по ширине дополнительное расстояние может быть отличным от нуля
normal
наследует значение родителя
наследует значение родителя
Свойство letter-spacing наследуется, применяется ко всем элементам, изменяет текст
<style>
div {
  letter-spacing: normal;
}
</style>

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

Что такое letter-spacing

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

з
заказ
заказ⁠
<style>
div {
  letter-spacing: 1em;
}
</style>

<div>з<br>заказ<br>заказ&NoBreak;</div>

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

з
заказ
заказ⁠
<style>
div {
  letter-spacing: -.2em;
}
</style>

<div>з<br>заказ<br>заказ&NoBreak;</div>

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

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

заказ
<style>
div {
  text-align: center;
}
</style>

<div>заказ</div>
заказ
<style>
div {
  text-align: center;
  letter-spacing: 1em;
}
</style>

<div>заказ</div>
заказ
<style>
.raz {
  text-align: center;
  letter-spacing: 1em;
  overflow: hidden;  /* обрезать то, что выходит за границу блока */ 
}
.raz div {
  margin-right: -1em;  /* не учитывать все крайние отступы справа, расположить текст строго по центру, даже если в каждой строке в результате сужения блока останется лишь по одной букве */ 
}
</style>

<div class="raz"><div>заказ</div></div>
◄▲►
Все комментарии