CSS від А до Я: як задати властивість line-height

Від автора: вітаю вас в нашій серії уроків CSS від А до Я! В цій серії я розповім вам про CSS значення і властивості, які починаються з різних букв алфавіту. Іноді навчального ролика буває недостатньо, і в цій статті я дам вам кілька швидких рад по роботі з властивістю line-height.

L значить line-height

У цій статті ми з вами познайомимося з скороченими властивості font-size і line-height, які допоможуть нам заощадити пару зайвих натискань клавіш.

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

Порада 1

Властивість line-height застосовується тільки до елементів властивість display зі значеннями inline або inline-block і задає висоту блоку рядкового навколо елемента. Якщо встановити властивість line-height на блоковому елементі, ви, можливо, побачите невеликі зміни в стилях. Однак це будуть зміни инлайновых дочірніх елементів даного блоку, так як властивість line-height може успадковуватись.

Якщо у властивості line-height вказати значення без одиниць вимірювання, то обчислене значення висоти рядка буде дорівнювати вказаному значенню, помноженому на поточне значення font-size елемента.

{
font-size: 20px;
font-family: ‘Avenir’, sans-serif;
line-height: 1.5; /* 30px */
}

Порада 2

Якщо необхідно вказати властивості line-height і font-size одночасно, можна скористатися скороченим властивістю font. Дане скорочення дозволяє задати font-style, font-variant, font-weight, font-size, line-height і font-family в одному рядку. Код вище можна переписати в одне скорочене властивість font:

{
font: 20px/1.5 ‘Avenir’, sans-serif;
}

У такому синтаксисі дуже важливий порядок оголошення.

Повний приклад з використанням усіх доступних властивостей шрифту буде виглядати так:

{
/* style | variant | weight | size/line-height | family */
font: italic small-caps 700 20px/1.5 ‘Avenir’, sans-serif;
}