Как сделать расстояние между текстом в css
Перейти к содержимому

Как сделать расстояние между текстом в css

  • автор:

Как изменить расстояние от маркера до текста?

Для изменения расстояния между маркером списка и текстом используйте свойство padding-left для селектора li , как показано в примере 1.

Пример 1. Расстояние от маркера до текста

Результат данного примера показан на рис. 1. Здесь расстояние от маркеров до текста задано как 20 пикселей.

Расстояние между маркерами и текстом списка

Рис. 1. Расстояние между маркерами и текстом списка

Отрицательное значение для padding-left использовать нельзя, поэтому минимальное задаваемое расстояние равно нулю. Но даже в этом случае небольшой исходный промежуток между маркером и текстом останется.

Указанное решение не работает, если для списка (селектора ul или ol ) задано свойство list-style-position со значением inside .

См. также

  • list-style-position
  • padding-left

Свойство word-spacing

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus perspiciatis soluta dicta nulla? Aliquam repudiandae debitis.

word-spacing: 10px;

Интервал между словами в указанных единицах. Возможные единицы: px, em, rem, %, vh, vw

 .example-2 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus perspiciatis soluta dicta nulla? Aliquam repudiandae debitis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus perspiciatis soluta dicta nulla? Aliquam repudiandae debitis.

Мне нужно добавить расстояние между текстом и свойством underline для этого текста

У меня есть заголовк-ссылка, и при наведении она должна иметь свойство подчеркивания как на изображении ниже; При наведении я даю свойство text-decoration: underline solid 1px $green; введите сюда описание изображения И у меня получаеться такое: введите сюда описание изображения Мне нужно добавить расстояния между текстом и свойсвтом underline!

Отслеживать

Roman Vinichenko

задан 1 окт 2021 в 8:55

Roman Vinichenko Roman Vinichenko

101 8 8 бронзовых знаков

попробуйте заменить на border-bottom + padding-bottom

1 окт 2021 в 9:04

Вообще, это свойство называется text-underline-offset

1 окт 2021 в 9:21

@teran у меня 2 строки текста, border будет давать подчеркивание нижней части текста

1 окт 2021 в 10:39

если элемент инлайн, то будет у каждой строки

1 окт 2021 в 10:48

@AlexeyVladimirov Спасибо, это то что мне и нужно было

1 окт 2021 в 10:52

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Inflammation of the thyroid i what should i watch out for?

Отслеживать

ответ дан 1 окт 2021 в 10:42

768 5 5 серебряных знаков 19 19 бронзовых знаков

Спасибо, ответ был дан верно

1 окт 2021 в 10:52

Интересная поддержка

1 окт 2021 в 10:52

Ну или border-bottom и padding-bottom

p < max-width: 400px; margin: 0 auto; text-align: center; font-size: 175%; >p > span

Inflammation of the thyroid i what should i watch out for?

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 — значение межбуквенного расстояния из Фотошоп.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *