Как задать межстрочный интервал в CSS и HTML?
В этой небольшой статье я хочу рассказать об одном полезном свойстве, позволяющем изменять межстрочный интервал в HTML и CSS.
Это может вам понадобиться для того чтобы сделать чтение текста более комфортным, а также изменить внешний вид текста, его расположение в блоке и даже выровнять этот текст по вертикали.
Навигация по статье:
Как задать межстрочный интервал CSS?
Для задания межстрочного интервала в CSS существует специальное свойство line-height. Дословно оно переводится как высота строки.
Это CSS-свойство может принимать несколько значений:
Как задать межстрочный интервал html?
Какого-то специального тега, который бы изменял межстрочный интервал в HTML нет. Поэтому для его изменения можно воспользоваться следующими способами:
-
1. Использовать атрибут style, внутри которого использовать то же свойство line-height с нужными нам параметрами.
Например:
Использование межстрочного интервала в HTML и CSS для выравнивание по вертикали и задания отступов.
Если у вас, к примеру, есть кнопка или блок с заголовком, в котором нужно задать отступы сверху и снизу или выровнять этот текст по центру по вертикали, то тут вы так же можете воспользоваться CSS-свойством line-height.
Ниже приведён пример заголовка без межстрочного интервала и с ним.
Межстрочный интервал равен 0%
Межстрочный интервал равен 300%
Таким образом, при помощи данного CSS свойства вы можете изменять межстрочный интервал в HTML и CSS коде, и таким образом делать оформление ваших сайтов более привлекательным.
Спасибо что дочитали статью до конца! Если она была для вас полезной, то обязательно поделитесь ею в соцсетях. Так вы поможете мне в продвижении моего проекта.
Желаю вам успехов в оформлении ваших сайтов! До встречи в следующих статьях!
line-height
Свойство CSS line-height устанавливает величину пространства между строками, например в тексте. В блочных элементах оно указывает минимальную высоту блоков строк внутри элемента. В незамещаемых внутристрочных элементах —указывает высоту, которая используется для вычисления высоты блоков строк.
Интерактивный пример
Синтаксис
Свойство line-height задаётся с помощью:
Значения
Зависит от пользовательского браузера. Компьютерные браузеры (включая Firefox) используют значение по умолчанию приблизительно 1.2 , в зависимости от элементов font-family .
<число> (без именования)
Значением line-height будет результат умножения указанного числа (без именования) на размер шрифта элементов. Указанное число, по сути, множитель. В большинстве случаев это предпочтительный способ указания значения line-height , потому что позволяет избежать непредвиденных результатов при наследовании.
Указанная <величина> используется при вычислении высоты блока строки. Значение, заданное в единицах em может привести к непредвидимым результатам (смотри пример ниже).
Относительно размера шрифта самого элемента.Relative to the font size of the element itself. The computed value is this <percentage> multiplied by the element’s computed font size. Percentage values may produce unexpected results (see the second example below).
Формальный синтаксис
Примеры
Basic example
It is often more convenient to set line-height by using the font shorthand as shown above, but this requires the font-family property to be specified as well.
Prefer unitless numbers for line-height values
This example shows why it is better to use <number> values instead of <length> values. We will use two <div> elements. The first, with the green border, uses a unitless line-height value. The second, with the red border, uses a line-height value defined in em s.
Свойство CSS line-height
Свойство CSS line-height отвечает за расстояние между строками. Иногда это свойство называют интерлиньяжем.
Синтаксис CSS line-height
Где value может принимать
- normal — константа, которая означает стандартное межстрочное расстояние
- Простые вещественные значения (1.0, 0.4, 1.3 — это коэффициент множителя относительно стандартного расстояния между строками)
- Значение в пикселях (1px, 20px)
- Значение в пунктах pt (1.0pt, 1.2pt)
- Значение в единицах em (0.5em, 0.2em)
- Значение в процентах
В зависимости от шрифта и его размера межстрочный интервал разный. В Microsoft установили стандарт: line-height:1.2em
Межстрочный интервал CSS на сайте html
Пример. Различные варианты задания межстрочного интервала
На странице преобразуется в следующее
Пример 1. Какой-то текст. line-height:1.0
Какой-то текст
Пример 2. Какой-то текст. line-height:0.5
Какой-то текст
Пример 3. Какой-то текст. line-height:2.0
Какой-то текст
Пример 4. Какой-то текст. line-height:12px
Какой-то текст
Лучшие выбирать относительные интервалы от 1.5 до 2.5 (или в процентах 150%..250%). При таком интервале текст лучше читается, а интервал привязан к размеру шрифта.
Для обращения к line-height из JavaScript нужно писать следующую конструкцию:
line-height¶
Свойство line-height для блочных элементов определяет минимальную высоту строки текста.
Для внедряемых строчных элементов (вроде <img> ) свойство line-height не оказывает никакого эффекта.
Для остальных строчных элементов line-height задаёт высоту, которая используется для расчёта высоты строки блока.
Синтаксис¶
Значения¶
Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пиксели (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берётся высота шрифта.