Свойство CSS letter-spacing

Свойство CSS letter-spacing отвечает за расстояние между буквами (символами) в html. Мы можем их либо сближать (отрицательное значение), либо наоборот отдалять (положительные значения).

Синтаксис CSS letter-spacing

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

Где:

  • значение – расстояние между буквами. Можно задавать в пикселях (px), дюймах (in), пунктах (pt), а также в относительных единицах (em, ex).
  • normal (по умолчанию) – обычное расстояние между буквами
  • inherit – принять значение предка (родителя)

Как изменить расстояние между буквами в html

Пример с letter-spacing

В первом примере перенос слов будет включен, а во втором выключен.

<html>
<head>
<style>
.primer1{
letter-spacing: 7px;
font-size: 14px;
}
.primer2{
letter-spacing: 0.4em;
font-size: 14px;
}
.primer3{
letter-spacing: 0.75em;
font-size: 14px;
}
.primer4{
letter-spacing: -0.1em;
font-size: 14px;
}
.primer5{
letter-spacing: 0;
font-size: 14px;
}
.primer4{
letter-spacing: -1px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="primer1">Пример №1. Значение letter-spacing:7px;</div>
<div class="primer2">Пример №2. Значение letter-spacing:0.4em;</div>
<div class="primer3">Пример №3. Значение letter-spacing:0.75em;</div>
<div class="primer4">Пример №4. Значение letter-spacing:-0.1em;</div>
<div class="primer5">Пример №5. Значение letter-spacing:0;</div>
<div class="primer6">Пример №6. Значение letter-spacing:-1px;</div>
</body>
</html>

Вот как это выглядит на странице:

Пример №1. Значение letter-spacing:7px;

Пример №2. Значение letter-spacing:0.4em;

Пример №3. Значение letter-spacing:0.75em;

Пример №4. Значение letter-spacing:-0.1em;

Пример №5. Значение letter-spacing:0;

Пример №6. Значение letter-spacing:-1px;

Для обращения к letter-spacing из JavaScript нужно писать следующую конструкцию:

[window.]document.getElementById("elementID").style.letterSpacing="VALUE"




Читайте также:

• Свойство font

• Свойство transform

• CSS border

• CSS background

• CSS transition

• CSS position fixed


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.