Войти
Регистрация

Межстрочный и межбуквенный интервал в CSS

Межстрочный и межбуквенный интервал текста

Привет, друзья.

Не большая тема, посвященная строчным и буквенным интервалам в CSS

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

Если Вы будете делать сайт для заказчика, которому дизайнер нарисует сайт, растянув строку из дизайнерских соображений, либо заказчик, наоборот, захочет сжать текст и расстояние между буквами, тут Вы сможете это осуществить в css.

И так, за межбуквенное расстояние отвечает свойство letter-spacing, которое в качестве значения принимает все те же единицы измерения CSS

p {
   letter-spacing: 4px;
}
p {
   letter-spacing: 1.5em;
}
p {
   letter-spacing: 1.2vw;
}
p {
   letter-spacing: 2vh;
}
p {
   letter-spacing: -2px;
}

Результат следующий:

  • Интервал 4px
  • Интервал 1.5em
  • Интервал 1.2vw
  • Интервал 2vh
  • Интервал -2px

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

Межстрочный интервал, так же как и в MS Word делает отступы между строк и отвечает за это свойство line-height.

Изначально межстрочный интервал устанавливается по умолчания, в зависимости от размера шрифта. Напишем следующее правило:

Пример текста без межстрочного интервала:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu...

Применив следующее правило:

p {
   line-height: 28px;
}

Мы получим:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu...

Получается, что сверху и снизу каждой строки задается интервал в 14 пикселей.

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

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?