Как задать межстрочный интервал в CSS и HTML?

Здравствуйте, дорогие друзья!

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

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

Как задать межстрочный интервал CSS?

Для задания межстрочного интервала в CSS существует специальное свойство line-height. Дословно оно переводится как высота строки.
Это CSS-свойство может принимать несколько значений:

1. 1.Множитель (число).

   Например:

   line-height: 1.5;

    

   Пример изменения межстрочного
   интервала текста в HTML и СSS.

   В данном примере мы получаем полуторный межстрочный интервал.
   Здесь за единицу берётся размер шрифта. То есть если размер шрифта будет равен 16 пикселей, то межстрочный интервал со значением 2 будет равен:
   2 x 16 = 32 пикселя.

2. 2.Значение в пикселях или других единицах.

   Например:

   line-height: 20px;

    

   Пример изменения межстрочного
   интервала текста в HTML и СSS.

   Так же вместо пикселей (px) можно использовать пункты (pt), высотe шрифта текущего элемента (em), дюймы(in) и так далее.

3. 3.Значение в процентах.

   Напрмер:

   line-height: 180%;

    

   Пример изменения межстрочного
   интервала текста в HTML и СSS.

   В этом случае за 100% берётся высота шрифта.

4. 4.Inherit – значение межстрочного интервала будет наследоваться от родительского элемента.

   Например:

   line-height: inherit;

    

   Пример изменения межстрочного
   интервала текста в HTML и СSS.
5. 5.Normal – в данном случае межстрочное расстояние задаётся автоматически.

   Например:

   line-height: normal;

    

   Пример изменения межстрочного
   интервала текста в HTML и СSS.

Как задать межстрочный интервал html?

Какого-то специального тега, который бы изменял межстрочный интервал в HTML нет. Поэтому для его изменения можно воспользоваться следующими способами:

1. 1.Использовать атрибут style, внутри которого использовать то же свойство line-height с нужными нам параметрами.
   Например:
   
   XHTML

   <div style=” line-height:1.5;”> Пример изменения межстрочного интервала текста в HTML и СSS. </div></li>

   1 2 3 4

   <div style=” line-height:1.5;”> Пример изменения межстрочного интервала текста в HTML и СSS. </div></li>

2. 2.Использовать тег </style> и в нём уже для элемента с нужным классом задавать межстрочный интервал.
   Например:
   
   XHTML

   <style> .block { line-height: 120%; } </style> <div class=”block”> Пример изменения межстрочного интервала текста в HTML и СSS. </div>

   1 2 3 4 5 6 7 8 9 10

   <style> .block { line-height: 120%; } </style>   <div class=”block”> Пример изменения межстрочного интервала текста в HTML и СSS. </div>

Использование межстрочного интервала в HTML и CSS для выравнивание по вертикали и задания отступов.

Если у вас, к примеру, есть кнопка или блок с заголовком, в котором нужно задать отступы сверху и снизу или выровнять этот текст по центру по вертикали, то тут вы так же можете воспользоваться CSS-свойством line-height.

Ниже приведён пример заголовка без межстрочного интервала и с ним.

Таким образом, при помощи данного CSS свойства вы можете изменять межстрочный интервал в HTML и CSS коде, и таким образом делать оформление ваших сайтов более привлекательным.

Спасибо что дочитали статью до конца! Если она была для вас полезной, то обязательно поделитесь ею в соцсетях. Так вы поможете мне в продвижении моего проекта.

Желаю вам успехов в оформлении ваших сайтов! До встречи в следующих статьях!

С уважением Юлия Гусарь