CSS приклад: letter-spacing

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Коротка інформація

Значення за замовчуванням нормальний
НаслідуєтьсяТак
ЗастосовуєтьсяДо всіх елементів
Посилання на специфікацію http://www.w3.org/TR/CSS21/text.html#propdef-letter-spacing

Версії CSS

CSS 1CSS 2CSS 2.1CSS 3

Опис

Визначає інтервал між символами всередині елементу. Браузери зазвичай встановлюють відстань між символами на основі типу та виду шрифту, його розмірів і налаштувань операційної системи. Щоб змінити це значення, застосовується ця властивість. Можна використовувати від'ємне значення, але в цьому випадку важливо, щоб зберігалася читабельність тексту.

Синтаксис

letter-spacing: значення | нормальний | успадковує

Значення

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

нормальний
Встановлює інтервал між символами як зазвичай.
успадковує
Успадковує значення батька.

Приклад

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>letter-spacing</title>
  <style>
   p {
    letter-spacing: 5px;
   }
  </style>
 </head> 
 <body> 
  <h1>Duis te feugifacilisi</h1>
  <p>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.</p>
 </body>
</html>

Результат цього прикладу показаний на рис. 1.

Об'єктна модель

[window.]document.getElementById("IDелемента").style.letterSpacing

Браузери

Internet Explorer до версії 7.0 включно не підтримує значення успадковує.

Часті запитання

  • Q: Як використовувати letter-spacing в CSS?

    A: Задайте значення властивості letter-spacing для визначення проміжку між символами в тексті. Наприклад, letter-spacing: 2px; задасть проміжок у 2 пікселі.

  • Q: Де можна застосовувати letter-spacing в CSS?

    A: Letter-spacing можна використовувати для заголовків, підзаголовків, параграфів або будь-якого текстового контенту на веб-сторінці.

  • Q: Як використовувати letter-spacing для зміни міжслівного проміжку?

    A: Для зміни міжслівного проміжку використовуйте властивість word-spacing. Letter-spacing впливає на міжсимвольний проміжок.

  • Q: Чи можна використовувати від'ємні значення letter-spacing?

    A: Так, можна використовувати від'ємні значення letter-spacing для стискання тексту. Наприклад, letter-spacing: -1px; зведе проміжок між символами.

  • Q: Чи підтримується letter-spacing в усіх браузерах?

    A: Так, властивість letter-spacing підтримується у всіх сучасних браузерах і має хорошу кросбраузерність.