html.okpython.net
Основы создания сайтов
CSS :: Свойство letter-spacing
css-свойство letter-spacing (от англ. letter spacing – интервал между символами) устанавливает интервал между отдельными символами текста в пределах элемента.
Характеристики
- Значение по умолчанию: normal.
- Применяется: ко всем элементам.
- Наследуется: да.
- Анимируется: да.
- JavaScript: object.style.letterSpacing="value".
Синтаксис
letter-spacing: <размер> | normal
Значения
- размер – принимаются любые единицы измерения (смотреть), используемые в CSS. Разрешается использовать отрицательные значения, но в этом случае слова и символы могут заходить друг на друга или вести себя непредсказуемым образом, так что нужно быть внимательным и следить за сохранением читабельности текста. Значения в процентах не допускаются.
- normal – обычный интервал, используемый браузером.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-text-3/#propdef-letter-spacing
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/letter-spacing
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ margin: 3em; } .p_1{ letter-spacing: 0.6em; } .p_2{ letter-spacing: 0.2em; } .p_3{ letter-spacing: -2px; } </style> </head> <body> <p> letter-spacing: normal<br> Вторая строка абзаца<br> Третья строка абзаца </p> <p class="p_1"> letter-spacing: 0.6em<br> Вторая строка абзаца<br> Третья строка абзаца </p> <p class="p_2"> letter-spacing: 0.2em<br> Вторая строка абзаца<br> Третья строка абзаца </p> <p class="p_3"> letter-spacing: -2px<br> Вторая строка абзаца<br> Третья строка абзаца </p> </body> </html>
Пример №1