CSS letter-spacing — відстань між літерами

Властивість letter-spacing визначає інтервал між символами в межах елемента.

Браузери зазвичай встановлюють відстань між символами, виходячи з типу і виду шрифту, його розмірів і налаштувань операційної системи.

Як значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. Найкращий результат дає використання відносних одиниць, заснованих на розмірі шрифту (em і ex).

правити

Загальний опис

правити

Нотатка

Допустимо використовувати від'ємне значення, але в цьому випадку треба переконатися, що зберігається читабельність тексту.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

letter-spacing: normal|length|initial|inherit;

Властивість letter-spacing може отримувати 4 значень:

normal

Задає інтервал між символами. Без задання.

автор: Svitlana

правити

length

В якості значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. Найкращий результат дає використання відносних одиниць заснованих на розмірі шрифту (em і ex).

автор: Svitlana

правити

initial

Встановлює цю властивість в значення без задання

автор: Svitlana

правити

inherit

Успадкує значення властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3.5	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<h1>Розріджений заголовок</h1>
<h2>Стиснутий заголовок</h2>
<p>Звичайний текст для порівняння.</p>

h1 {
    letter-spacing: 2px;
}

h2 {
    letter-spacing: -3px;
}

<p>Вибери потрібне значення для <code>letter-spacing</code>:</p>

<input type="number" value="0" id="field"></input>

<div id="block">Привіт, я рядочок тексту :)</div>

body {
	padding: 36px;
  text-align: center;
  line-height: 1.45;
  font-size: 20px;
  font-family: sans-serif;
}

#field {
  padding: 8px;
}

#block {
  border-radius: 4px;
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .45);
  padding: 36px;
  text-align: center;
  background: gold;
  margin: 36px auto 0 auto;
  transition: letter-spacing .15s ease-in 0s;
  letter-spacing: 0;
}

var block = document.getElementById('block');

document.getElementById('field').onchange = function () {
  block.style.letterSpacing = this.value + 'px';
};
//# sourceURL=pen.js

<p>letter-spacing: 0;</p>

<p style="letter-spacing: 5px">letter-spacing: 5px;</p>

<h2 class="tight">Заголовок: letter-spacing -0.03em</h2>
<h2 class="plain">Заголовок: letter-spacing normal</h2>

<p class="caps">ВЕЛИКІ ЛІТЕРИ БЕЗ РОЗРІДЖЕННЯ</p>
<p class="caps wide">ВЕЛИКІ ЛІТЕРИ З 0.12EM</p>

<div class="center"><span class="loose">ЗМІЩЕНО</span></div>
<div class="center"><span class="loose fix">РІВНО</span></div>

body {
    font-family: sans-serif;
    font-size: 16px;
}

.tight {
    letter-spacing: -0.03em;
}

.plain {
    letter-spacing: normal;
}

.caps {
    font-size: 14px;
}

.wide {
    letter-spacing: 0.12em;
}

.center {
    text-align: center;
    margin-bottom: 8px;
    padding: 10px 0;
    background: #eef6ff;
    border: 1px solid #0172ad;
}

.loose {
    letter-spacing: 0.8em;
}

.fix {
    margin-right: -0.8em;
}