CSS letter-spacing, примеры. Расстояние между буквами в HTML

Свойство 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 уроков