Как изменить межстрочный интервал в css (свойство line-height)

css свойство line-height

Для того чтобы верстка была идеальной, нужно чтобы страница в браузере совпала на 100% с PSD макетом. И бывает случаи, когда межстрочный интервал у блока с текстом не совпадает с тем, который на макете. В этой статье расскажу именно о том, как изменить межстрочный интервал с помощью CSS свойства line-height.

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

Сейчас покажу Вам на примере, как работает это свойство. Допустим, у нас есть некий блок с текстом:

<div class="some_text" >
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

И у этого блока нам нужно изменить расстояние между строками. Для этого, в CSS пишем следующее:

.some_text{
    line-height: 2;
}

Открываем страницу в браузере и смотрим на результат:

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

Числовое значение, больше нуля у свойства line-height является множителем от текущего размера шрифта. Размер шрифта по умолчанию равен 16 px, значение line-height в примере равно 2, значит расстояние между строк равно 16px * 2 = 32px.

Расстояние можно задать и напрямую в пикселях или в другие единицы измерения доступные в CSS(дюймы – in, пункты - pt, проценты - % и другие).

По умолчанию, свойство line-height имеет значение normal.

В случае процентной записи, за основу берется размер шрифта. По умолчанию 100% = 16px.

Но все же рекомендуется использовать безразмерное число(как в примере), потому что оно является динамическим. Результат применения этого значения, напрямую зависит от размера текста.

Как считается расстояние ?

Расстояние между строк считается от базовой линии верхней строки до базовой линии нижней строки.

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

Как видно из примера, расстояние между строками текста равно 32px.

Свойство line-height наследуется дочерними элементами

Это значит, что если мы, например, зададим тегу body данное свойство, со значением 1.5 то оно будет действительна и для всех его дочерних элементов.

Продемонстрирую это на предыдущем примере. В стилях, вместо класса .some_text напишем название родительского тега body, а HTML код, оставим без изменения.

body{
    line-height: 2;
}

Сохраняем документ и откроем заново страницу в браузере.

наследование line-height

Вот и все что я хотел Вам рассказать в этой маленькой статье. Теперь Вы знаете, как изменить межстрочный интервал с помощью CSS свойства line-height. Удачи Вам!

Похожие статьи:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Delivered by FeedBurner

Поддержите пожалуйста мой проект!

%next_previous_article%

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

Добавляйтесь в мои группы:

Подпишитесь на мои каналы:

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: %date%