Css міжрядковий інтервал: варіанти рішень

Досить часто у початківців верстальників виникають проблеми при освоєнні каскадних таблиць стилів (CSS). Не виключенням є робота з міжстроковими інтервалами в CSS. Міжрядковий інтервал - це відстань між рядками по вертикалі. Як і в звичайному документі Microsoft Word, в тексті html-файлу теж можна змінювати цей параметр.

Використання line-height при зміні інтервалу

Першим і найбільш правильним варіантом вирішення проблеми з інтервалами буде завдання значення властивості line-height. За замовчуванням значення цієї властивості дорівнює normal (line-height: normal-). Міжрядковий інтервал обчислюється автоматично самим інтернет-браузером і залежить, зокрема, від виду шрифту, а також його розміру. Будь-яке позитивне цифрове значення, яке буде задано в стильовому властивості line-height, браузер буде сприймати як число, на яке необхідно помножити розмір поточного шрифту.

В CSS міжрядковий інтервал може здаватися в різних одиницях довжини: пункти (pt), дюйми (in), пікселі (px) і відсотки (%). Відсоток розраховується щодо поточного шрифту, і за замовчуванням його значення дорівнює 100%. Не варто забувати, що властивість line-height запозичує значення властивості inherit у свого батьківського елемента.

Наведемо кілька прикладів, як збільшити міжрядковий інтервал в CSS:

.

Процес роботи з міжстроковими інтервалами досить простий. У вас повинні бути початкові знання CSS і вміння підключати файл до головної сторінки html. Стилі також можна задавати прямо на html-сторінці:

Щоб в цьому реченні зробити полуторний інтервал, необхідно в файлі CSS додати такий код:

p.stroka {

line-height: 1.5;

}

Для того, щоб зробити подвійний інтервал, можна прописати такий код:

p.stroka {

line-height: 2;

}

або

p.stroka {

line-height: 200%;

}

В обох випадках браузер буде розуміти, що потрібно поточний шрифт помножити на 2. Це значення і буде міжрядковим інтервалом.

Тепер наведемо приклад, як зменшити міжрядковий інтервал (CSS):

Важливо пам`ятати, що від`ємне значення line-height просто не сприймається, тому мінімальним його значенням може бути 0. Для того щоб отримати половинний інтервал, необхідно прописати такий код:

p.line {

line-height: 0.5;

}

або

p.line {

line-height: 50%;

}

або

p.line {

line-height: 2;

}

або

p.line {

line-height: 0.5pt;

}

Всі 3 варіанти коректні і відповідають всім стандартам W3C, відповідно, будуть працювати в будь-якій версії браузера.

Використання padding при зміні інтервалу

Однак крім зміни властивості line-height, існує ще один спосіб змінити в CSS міжрядковий інтервал, це буде "гра" зі значеннями властивості padding. Стильова властивість padding відповідає за внутрішні відступи в будь-якому html-об`єкті. За замовчуванням ця властивість дорівнює 0. Підбираючи різні значення, можна змінити міжрядковий інтервал, наприклад:

.

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

Для збільшення міжрядкового інтервалу збільшуємо значення властивості:

p.second {

padding: 10px;

}

Таким чином, відстань між рядками в нашому абзаці буде збільшено на 10 пікселів щодо початкового. З таким же успіхом можна і зменшити міжрядковий інтервал, прописавши наприклад:

p.second {

padding: 0px;

}

Негативне значення міжрядкового інтервалу

Якщо ви помітили, також не дозволяється вводити негативні значення, щоб не виходило накладення рядків один на одного. В CSS міжрядковий інтервал не може мати від`ємного значення. З точки зору дотримання правил написання коду і стандартів W3C, ви ніколи не зможете прописати негативні значення в значеннях міжрядкового інтервалу.

Зміна міжрядкового інтервалу в списках

Іноді виникає завдання змінити інтервали між рядками в списках

і
. Попередні методи не приведуть до потрібного результату, проте є одна властивість, яке може змінити інтервал в списку - це властивість - margin. Дане стильове властивість може бути як з позитивним, так і негативним значенням. Покажемо зміна міжрядкового інтервалу в списку на прикладі:

Пункт 1

Пункт 2

пункт 3

Для збільшення відступів потрібно в CSS-файлі прописати наступні рядки:

ul li {

margin-top: 10px;

}

Таким чином ми вказали, що відстань від кожного пункту списку збільшується на 10 пікселів. Причому в даному випадку можливо і негативне значення. Таким чином, ми можемо поставити: - margin-top: -15px.

Внимание, только СЕГОДНЯ!