Інтервали між рядками, CSS, основи

Сьогодні ми з вами будемо розбирати інтервали між рядками CSS. Дана властивість допомагає зробити текст більш зручним для читання. Також воно часто використовується для зменшення розміру, займаного контентом на сторінці. Спеціально для самих недосвідчених трохи нижче буде наданий короткий екскурс по історії питання. Отже, далі ви дізнаєтеся, як встановлювати інтервали між рядками CSS.

Необхідні відомості

CSS розшифровується як Cascading Style Sheet, що в перекладі означає «каскадні таблиці стилів». Дана мова використовується для оформлення веб-сторінок, які були написані на мові розмітки (наприклад, HTML). До появи CSS дизайн документів встановлювався з використанням вбудованих тегів HTML, але вони були вкрай незручні і заполоняли весь код. Тому було прийнято рішення створити нову мову, який відповідатиме за оформлення. Сьогодні CSS і HTML - це два нерозривні поняття. Синтаксис каскадних таблиць дуже простий, тут використовується властивості та їх значення, наприклад «background: red». Щоб призначити область дії, потрібно просто написати перед властивістю ім`я тега (або ідентифікатори): «body {background: red-}», а сама команда поміщається між фігурними дужками. В кінці кожної записаної строчки з описом характеристики повинна ставитися крапка з комою, інакше виникне помилка.

Інтервали

Але вистачить вступних фраз, перейдемо до справи. Інтервали між рядками CSS встановлюються за допомогою властивості line-height. Застосовуватися воно може до всіх елементів. Само властивість успадковується, це означає, що дочірні елементи будуть копіювати інтервал від своїх батьків. Наприклад, якщо написати наступну команду: body {line-height: 20px}, то у всіх елементів на сторінці міжрядковий інтервал буде дорівнювати 20 пикселям. Як значення дана властивість може використовувати будь-які відомі в CSS одиниці виміру (пункти - pt, пікселі - px, дюйми - in і т. Д.). Також можна використовувати відносні величини, наприклад відсотки або множники. У цьому випадку CSS-інтервал між рядками буде вираховуватися від батьківського елементу. Значенням за замовчуванням вважається ключове слово normal.

Додаткові відомості

Раз вже ми заговорили про інтервали, то варто згадати про відстань між буквами. Для визначення цієї характеристики в CSS відведено окреме властивість, а саме letter-spacing. Принцип дії даної команди схожий з line-height. Одиниці виміру й інші значення однакові. CSS-інтервал між буквами може також застосовуватися до всіх елементів, і має підтримку у всіх версіях мови. Приклад використання властивості: «h2 {letter-spacing: 10px-}». Якщо призначити інтервал між буквами для елемента body, то всі елементи успадкують цю характеристику (якщо значення явно не перепризначено).

Висновок

Слід зазначити, що деякі браузери неправильно визначають інтервали між рядками CSS. Наприклад, програма IE (до 7.0 версії) некоректно вираховує відстань. У цьому випадку слід враховувати різницю інтервалу. У нових версіях цього браузера помилка повністю виправлена. Схожа проблема зустрічається при використанні властивості для визначення відстань між буквами. У всіх інших програмах дані команди визначаються відповідно до W3C (Консорціум світової павутини).