Межсимвольный интервал css: line-height, letter-spacing, word-spacing — учебник CSS

Межстрочный интервал | CSS | CodeBasics

Межстрочный интервал (интерлиньяж) — важный пункт при работе с текстом. Данный параметр определяет, сколько пространства будет между строчками.

Заметьте, что левый текст труднее читать. Это связано с тем, что глаза не «цепляются» за строку и взгляд постоянно переходит с одной строки на другую и обратно.

Для установки межстрочного расстояния используется правило line-height. В качестве значения используется число и единица измерения. Как и при установке размера шрифта можно использовать различные единицы измерения, но в рамках курса мы используем пиксели. Другие единицы измерения будут изучены позже

Добавьте в редактор параграф с классом

Попробуйте добавить в параграф длинные фразы и изменять размер межстрочного интервала, чтобы увидеть, как это влияет на удобство чтения

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

• Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

← Предыдущий

Следующий →

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

CSS: интервал между строками

С помощью CSS мы можем управлять не только расстоянием между словами и буквами, но и межстрочным интервалом. Казалось бы, в каких ситуациях может пригодиться такая тонкая настройка?

Я считаю, что управление расстоянием между строками входит в Топ 10 самых важных настроек для любого блога. Связано это с тем, что используя эту возможность, мы можем облегчить чтение текста нашими пользователями.

А что может быть дороже удобства посетителя сайта?

Видеоверсия:

При помощи свойства line-height мы задаем межстрочный интервал. Вообще, это значение отсчитывается браузером автоматически, в зависимости от размера и вида шрифта.

Считается, что межстрочный интервал, который по-другому называют интерлиньяж, равняется расстоянию между двумя базовыми линиями текста.

На иллюстрации выше вы можете видеть высоту строки, обозначаемую как line-height. Непосредственное расстояние между ними принято называть leading.

Например, если мы зададим расстояние между строками равное 24 пикселям, а размер шрифта 16 пикселям, то leading у нас будет равняться 8 пикселям (24-16).

Допустимые значения

В качестве значений можно использовать все те же пиксели, em и проценты, с которыми мы познакомились в уроке по размеру шрифтов. Например, давайте попробуем установить межстрочный интервал в 24 пикселя.

body { line-height: 24px; }

Как видите, все довольно просто. Однако, в подобной записи есть недостаток. Заключается он в том, что в будущем при изменении размера текста нужно не забыть поменять интерлиньяж.

По-другому обстоит дело с процентами и значением em, которые высчитываются исходя из кегля шрифта. Давайте попробуем указать значение в полтора раза больше размера текста. Для этого воспользуемся сразу двумя показателями.

body { line-height: 150%;
line-height: 1.5em; }

Как видно на примере выше, можно использовать как проценты, так и em. Они абсолютно равнозначны.

Лучшее решение

Так как свойство line-height наследуется, в использовании процентов и единиц измерения em есть свой недостаток. Заключается он в том, что в подобных случаях наследуется не коэффициент величины межстрочного интервала над размером шрифта, а само значение.

Например, дадим шрифтам тега body размер в 12 px, и интерлиньяж в 150 процентов. Значит, конечное значение будет равняться 18 пикселю.

Далее, поменяем кегль текста в абзацах на 20 px. В этом случае, межстрочный интервал будет не 30 px (18*1.5), как ожидалось, а останется 18 px, который был унаследован от тега body.

Множитель

Для задания интервала между строками лучше использовать множитель — простое числовое значение, которое, между прочим наследуется надлежащим образом.

body { line-height: 1.5; }

В данном примере, межстрочное расстояние всегда будет в полтора раза больше размера текста. Даже при наследовании.

Исходя из этого, я советую вам отдать предпочтение числовому множителю. Так вы обезопасите себя от непредсказуемых последствий, и освободите от дополнительной работы по смене значений свойства line-height, при корректировке кегля шрифта.

А на этом у меня все. Смею предположить что вам все понятно, если нет — задавайте свои вопросы в комментариях. Надеюсь, данный урок по CSS был для вас полезен. Если это так, сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу.

Закрыть

Межбуквенный интервал — Tailwind CSS

​Основное использование

​Установка межбуквенного интервала

Управляйте межбуквенным интервалом элемента с помощью утилит tracking-{size} .

точный

Быстрая коричневая лиса прыгает через ленивую собаку.

нормальное отслеживание

Быстрая коричневая лиса прыгает через ленивую собаку.

отслеживание

Быстрая коричневая лиса прыгает через ленивую собаку.

 
Быстрая коричневая лиса...
  
Быстрая коричневая лиса...
The quick brown fox...
 

​Использование отрицательных значений

Чтобы использовать отрицательное значение межбуквенного интервала, поставьте перед именем класса тире, чтобы преобразовать его в отрицательное значение.

Использование отрицательных значений не имеет большого смысла с масштабом межбуквенного интервала, который Tailwind включает в себя из коробки, но если вы решили настроить шкалу межбуквенного интервала для использования чисел вместо описательных слов, таких как «широкий», модификатор отрицательного значения может быть полезен.

 
Быстрая коричневая лиса...
 

 module.exports = {
  тема: {
    Межбуквенное расстояние: {
      «1»: «0em»,
      «2»: «0,025 см»,
      «3»: «0,05 эм»,
      «4»: «0,1 эм»,
    }
  }
} 

​Условное применение

​Наведение, фокус и другие состояния

Попутный ветер позволяет условно применять служебные классы в различных состояниях, используя модификаторы вариантов. Например, используйте hover:tracking-wide , чтобы применить только tracking-wide 9.Утилита 0008 при наведении.

Полный список всех доступных модификаторов состояния см. в документации Hover, Focus и других состояний.

​Точки останова и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как чувствительные точки останова, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:tracking-wide , чтобы применить утилиту tracking-wide только на экранах среднего размера и выше.

 <р>
  

 

 module.exports = {
  тема: {
    Межбуквенное расстояние: {
      самый плотный: '-. 075em',
      плотнее: '-.05em',
      плотно: '-.025em',
      нормальный: «0»,
      широкий: '0,025em',
      шире: «.05em»,
      самый широкий: '.1em',
      самый широкий: '.25em',
    }
  }
}
 

 
Это простой абзац со значением межбуквенного интервала по умолчанию.
Это простой абзац с измененным межбуквенным интервалом на 0,3em.
Это простой абзац с измененным межбуквенным интервалом на -0,1em
 

 p {
    межбуквенный интервал: нормальный;
}
п.поз {
    межбуквенный интервал: .3em;
}
p.neg {
    межбуквенный интервал: -.1em;
}
 

 * Можно указать до трех различных значений в следующем порядке: оптимальное, минимальное, максимальное