Від автора: вітаю вас в нашій серії уроків 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;
}
У такому синтаксисі дуже важливий порядок оголошення.
Властивість font-family повинно йти останнім.
Властивість line-height має йти слідом за font-size і бути відокремлене від нього символом /.
Властивості font-style, font-variant і font-weight повинні йти до font-size і line-height.
Повний приклад з використанням усіх доступних властивостей шрифту буде виглядати так:
{
/* style | variant | weight | size/line-height | family */
font: italic small-caps 700 20px/1.5 ‘Avenir’, sans-serif;
}