Міжрядкові інтервали CSS дуже необхідні для вигляду тексту. Будь-який фахівець завжди їх використовує, якщо створює красивий сайт. За допомогою цих атрибутів можна виконувати будь-які дії з текстом.
Як правило, більшості верстальників не подобається вигляд тексту за замовчуванням у html. Міжрядковий інтервал CSS дозволяє налаштувати практично все, що тільки можна уявити. А якщо заглибитися, то можна зробити те, що вам і на думку не спадало.
Як зробити міжрядковий інтервал тексту у CSS
Важливо розуміти, що задавати розміри рядків, відступи та інше можна до всіх елементів, де є текст. Наприклад, всі ці атрибути відмінно застосовуються для:
- абзацу;
- списків;
- <span>;
- таблиць;
- заголовків;
- і всього іншого, де ви розміщуєте текст.
Розглядаючи міжрядкові інтервали CSS, насамперед звертають увагу на наступні атрибути:
У "Фотошопі" існує поняття Leading. Такого атрибуту в CSS немає, але завдяки йому можна пояснити суть. Leading за фактом і є відстань між рядками.
У CSS розмір рядка задається параметром line-height і font-size. Як бачите, на малюнку ясно вказано, що font-size - це розмір шрифту. Жодна буква за ці межі ніколи не виходить.
Line-height - це відстань від середини верхнього Leading до середини нижнього Leading. Стрілочками все це вказано на малюнку.
Зауважте, що якщо вказати висоту лінії менше, ніж розмір шрифту, рядки будуть наїжджати один на одного. Обов 'язково стежте за цим, щоб не вийшло такої ситуації.
Деякі думають, чому font-size розтягнуть нижче, ніж лінія з літерами. Все просто. Адже існують літери, які опущені нижче, ніж основний рівень рядка. Нижче на малюнку - наочний приклад, де використовуються символи, витягнуті вгору і вниз.
Як бачите, букви якраз займають весь діапазон font-size. А висота лінії більша, і з обох сторін додається рівний простір.
Значення атрибута line-height може бути будь-яким:
- пікселі;
- дюйми;
- пункти;
- відсотки;
- і інші, які використовуються в CSS.
Не можна вказувати від 'ємне значення. Наприклад, якщо ви вкажете множник, рівний півтора, у вас вийде стандартний напівторний інтервал у тексті.
Якщо ви будете вказувати у відсотках, то враховуйте, що 100% в line-height рівносильно значенню font-size.
Крім цього, можна вказати значення normal або inherit. Якщо вказати normal, відстань між рядків обчислюється автоматично браузером на його розсуд. Значення може бути різним, оскільки залежить від браузера. Рекомендується ставити конкретне число, щоб у всіх користувачів було одне і те ж.
Inherit означає, що значення буде точно таке ж, як і у батьківського елемента.
Детальніше оформлення
Міжрядкові інтервали CSS насправді не обмежуються тільки вищевказаними атрибутами. Відстань ще коригується атрибутами margin і padding. Якщо вказати атрибут як margin = '5px', з усіх боків рядка (абзацу) буде додано відстань 5 пікселів.
Якщо вам потрібно вказати тільки над абзацем, можна вказати margin-top. Переклад дуже простий. Таким чином, можна буде вказати відступи з кожної сторони.
Зауважте, що є ще атрибут padding. Вона працює так само, як і margin. Ви можете вказати спільний погляд і напрямок (ліворуч, праворуч, вгору, низ).
Подивіться уважно на малюнок зверху. Margin - за межами об 'єкта, а padding - всередині.
Ці атрибути є глобальними. Їх можна застосовувати до всього - малюнків, таблиць, тексту, посилань тощо.
Запам 'ятайте це раз і назавжди. Це дуже важливий момент при оформленні об 'єктів. Наприклад, завдяки margin можна вказати відступи між текстом і картинками всередині нього. Якщо відступів немає, текст буде розкладено впритул до зображення.
Якщо у вас текст у таблиці, тоді використовуйте padding, щоб текст не прилипав до країв таблиці, оскільки це виглядає негарно. А якщо поставити порожній хоча б у 5 пікселів, вже буде виглядати куди краще. Крім висоти, лінія має атрибут ширини.
Іноді це дуже потрібна властивість. На зображенні внизу видно приклад різної ширини тексту.
Приклад вигляду
Створюючи дизайн сайту, завжди потрібно робити так, щоб текст був максимально читабельним. Якщо користувачеві буде складно читати текст (він занадто маленький або занадто великий), то він просто закриє ваш сайт.
Спробуйте порівняти два абзаци, вказані на зображенні нижче. Який текст вам зручніше читати?
Міжрядкові інтервали CSS для того і створені, щоб зробити зручним сприйняття тексту. Також не забувайте, що різні шрифти можуть відрізнятися за своєю початковою висотою.
Для наочності можете перевірити в будь-якому редакторі. Порівняйте декілька шрифтів.
Зауважте, що всі шрифти написані розміром 24 пікселів. Як бачите, всі вони відрізняються за висотою і шириною літери. Якщо порівнювати розміри побільше, то різниця буде більш очевидною.
CSS: міжрядковий інтервал у списку
Налаштування інтервалів застосовується і в списках. Крім цього, в стилях списків характерні вищеописані margin і padding. Завдяки цьому списки стають красивішими, ніж стандартні. Використовуючи всі ці атрибути, можна встановити:
- Висоту пунктів списку.
- Відступи для тексту ліворуч.
- Відступи для рядків зверху і знизу.
- Максимальна ширина кожного пункту.
Ув 'язнення
Володіючи таким набором атрибутів, можна грати з оформленням не тільки рядків, але і всього, що хочете. Це глобальні параметри, яким підпорядковуються абсолютно всі елементи (виняток - font-size, оскільки він тільки для тексту).