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

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: <p class=""stroka""> .

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

Щоб у цій пропозиції зробити напівторний інтервал, необхідно у файлі 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. Ви можете змінити міжрядковий інтервал, наприклад: <p class=""second"">.

Працювати з міжрядковими інтервалами дуже просто. Достатньо знати основи CSS і вміти з 'єднувати файл до основної сторінки html. Ви також можете вказати його безпосередньо на сторінці з суфіксом html. </p >

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

p.second {

padding: 10px;

}

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

p.second {

padding: 0px;

}

Від 'ємне значення міжрядкового інтервалу

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

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

Іноді виникає завдання змінити міжрядкові інтервали у списку < ul > та < ol >. Попередні методи не призведуть до потрібного результату, проте є одна властивість, яка може змінити інтервал у списку - це властивість - margin. Ця властивість стилю може бути і з додатним, і від 'ємним значенням. Покажемо зміну інтервалу між строками у списку на прикладі:

<ul>

< li > < a href = "" # "" > Пункт 1 </a > </li >

< li > < a href = "" # "" > Пункт 2 </a > </li >

< li > < a href = "" # "" > Пункт 3 </a > </li >

</ul>

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

ul li{

margin-top: 10px;

}

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