letter — spacing
letter — spacing задаёт межбуквенное расстояние — интервал между символами в тексте.
Пример
Скопировать ссылку «Пример» Скопировано
Стандартное расстояние между символами:
p letter-spacing: normal;>p letter-spacing: normal; >
Расстояние, заданное вручную с помощью значений длины:
p letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: 0.3px;>p letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: 0.3px; >
Значение, относительно другого элемента:
p letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset;>p letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset; >
Как понять
Скопировать ссылку «Как понять» Скопировано
С помощью letter — spacing можно сжать или растянуть текст на веб-странице. При этом расстояние между буквами и другими символами уменьшается или увеличивается, а сами символы остаются прежнего размера.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Задать межбуквенное расстояние можно в пикселях px , дюймах in , пунктах pt или других единицах, которые используются в CSS.
Значение может быть отрицательным, например, -1px . В этом случае убедитесь, что текст всё ещё можно прочесть, потому что, скорее всего, буквы «склеятся».
Вот какие значения можно задать:
- normal — стандартное межбуквенное расстояние, которое задано для шрифта (значение по умолчанию).
- конкретное значение — положительное или отрицательное значение в любых единицах величины. Значение может быть дробным. Положительное значение добавляется к стандартному расстоянию между буквами, а отрицательное — вычитается из него.
Ещё примеры
Скопировать ссылку «Ещё примеры» Скопировано
Попробуем задать расстояние между символами разными способами:
Стандартное расстояние normal.
Чуть шире, относительно стандартного. Задаём 0.4em.
Ещё шире, относительно стандартного: 1em.
Немного сжимаем с помощью отрицательного значения -0.05em.Добавляем по 6px между символами.
p class="normal">Стандартное расстояние normal.p> p class="em-wide">Чуть шире, относительно стандартного. Задаём 0.4em.p> p class="em-wider">Ещё шире, относительно стандартного: 1em.p> p class="em-tight"> Немного сжимаем с помощью отрицательного значения -0.05em. p> p class="px-wide">Добавляем по 6px между символами.p>
.normal letter-spacing: normal;>.em-wide letter-spacing: 0.4em;>.em-wider letter-spacing: 1em;>.em-tight letter-spacing: -0.05em;>.px-wide letter-spacing: 6px;>.normal letter-spacing: normal; > .em-wide letter-spacing: 0.4em; > .em-wider letter-spacing: 1em; > .em-tight letter-spacing: -0.05em; > .px-wide letter-spacing: 6px; >
Это не совсем то, что нужно. Но как тогда правильно перенести межбуквенное расстояние из Фотошопа в вёрстку?
Нужно использовать следующую хитрую функцию:
x * z / 1000 = y
- z — размер шрифта ( font — size ) в пикселях.
- x — значение межбуквенного расстояния из Фотошоп.
- y — результат вычисления, нужное значение для свойства letter — spacing в пикселях.
Подставим значения с картинки выше:
20 * 18 / 1000 = 0.36px
Можно также вычислить межбуквенное расстояние в em . Для этого используй формулу:
x / 1000 = y
Где x — значение межбуквенного расстояния из Фотошоп.
letter-spacing
Определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данное свойство. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.
Синтаксис
letter-spacing: значение | normal | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Наилучший результат дает использование относительных единиц основанных на размере шрифта (em и ex).
normal Задает интервал между символами как обычно. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
letter-spacing p Duis te feugifacilisi
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.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства letter-spacing
Объектная модель
[window.]document.getElementById(» elementID «).style.letterSpacing
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Расстояние между словами в css
Есть список, который превращается в горизонтальное меню.
Превращается он хорошо, но мне нужны большие отступы между словами. word-spacing не работает, только padding . Проблема в том, что справа и слева тоже вставляются отступы, то есть слова «Главная» и «Карта сайта» отходят от крайних границ. Как можно исправить?
.bottom_menu < margin: 0; -webkit-padding-start: 0; >.bottom_menu li
Отслеживать
3,847 3 3 золотых знака 19 19 серебряных знаков 35 35 бронзовых знаков
задан 12 июн 2016 в 21:56
Artur Mark Artur Mark
99 1 1 серебряный знак 8 8 бронзовых знаков
12 июн 2016 в 22:27
Откатывать верный и подробный ответ и ставить на другой не красиво так поступать
13 июн 2016 в 11:41
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Задать отступы между ссылками можно так padding-right: 30px
Запретить перенос строки можно так white-space: nowrap
Отступы между словами задаются так word-spacing: 20px в родительском элементе. Но тогда и ссылка карта__сайта будет иметь отступ
Вместо padding можно указать margin-left: 30px с float: left
или в css, используя псевдокласс :last-child
.bottom_menu < margin: 0; padding: 0; // word-spacing: 20px; >.bottom_menu li < display: table-cell; text-transform: uppercase; font-family: verdana; color: white; font-size: 28px; padding-right: 30px; white-space: nowrap; >.bottom_menu li:last-child
Отслеживать
ответ дан 12 июн 2016 в 22:33
3,847 3 3 золотых знака 19 19 серебряных знаков 35 35 бронзовых знаков
Не особо понял что нужно автору, может это? Чтобы растянуть меню на всю ширину страницы нужно добавить display: table; width: 100% , а чтобы убрать у первого и у последнего элементов отступы нужно добавить псевдоклассы :first-child и :last-child с нужными paddind, это сделано в примере ниже:
body < margin: 0; padding: 0; >.bottom_menu < margin: 0; padding: 0; display: table; width: 100%; background: #ccc; >.bottom_menu li < display: table-cell; text-transform: uppercase; font-family: verdana; color: white; font-size: 28px; padding: 12px 15px; white-space: nowrap; >.bottom_menu li:first-child < padding-left: 0; >.bottom_menu li:last-child
Отслеживать
ответ дан 12 июн 2016 в 22:38
MasterAlex MasterAlex
6,167 1 1 золотой знак 12 12 серебряных знаков 23 23 бронзовых знака
Между пунктами меню нужен большой пробел. Он добавляется с помощью padding. Но padding так же добавляет этот самый пробел и с краев и получается, что меню не justify, a center)) В общем вот s019.radikal.ru/i604/1606/57/20667115869f.jpg — видите, справа и слева меню не прилегает к краю
Как изменить расстояние между буквами и словами в CSS?
Наверняка у каждого из вас возникали ситуации, когда при верстке вам нужно было разместить в блоке какой-либо текст, но он в него не вмещался, или наоборот, был слишком маленьким по объему, и в блоке оставалось слишком много пустого места.
Навигация по статье:
- Как поменять расстояние между буквами?
- Как изменить интервал между словами?
В таких случаях можно попробовать различные методы выхода из положения. Например, можно поменять размер шрифта, урезать текст или изменить размер блока. Но если ни один из этих вариантов не подходят, то остается только поменять расстояние между буквами и расстояние между словами в CSS.
Как поменять расстояние между буквами CSS?
Чтобы изменить межбуквенный интервал в CSS мы можем использовать свойство letter-spacing. По умолчанию браузеры устанавливают межбуквенный интервал, основываясь на типе выбранного шрифта и его параметров. С помощью данного свойства мы можем задать расстояние между буквами для текста css в конкретном элементе.
Свойство letter-spacing может принимать три значения:
- Числовое значение – можно задать интервал в любых доступных для css единицах измерения (px, in, pt, em, ex), а так же можно задавать как положительные, так и отрицательные значения.
- normal – задает расстояние между буквами css для текста по умолчанию (0.25em)
- inherit – параметры межбуквенного интервала в css будут наследоваться от родительского элемента.
Например:
letter-spacing: 3px;
Как мы можем его использовать? Например, у меня четыре одинаковых блока с текстом, в оном блоке текст как раз подобран по размеру, а в остальных трех фрагменты текста значительно меньше, но изменить размеры блоков нельзя.
Для первых трех блоков можно попробовать увеличить расстояние между буквами css, и тем самым сделать его немного объемнее. В файле стилей, для абзацев в классах первых трех элементов пишем следующие свойства: