CSS line-height — міжрядковий інтервал

Властивість line-height встановлює висоту рядка. Це призводить до того, що рядки тексту розташовуються ближче або далі один від одного.

За звичайних обставин відстань між рядками залежить від виду і розміру шрифту і визначається, браузером, автоматично. Властівість line-height примусово встановлює висоту рядка. Для блокових елементів ця властивість визначає мінімальну висоту рядка тексту. На елементи, що вбудовуються (типу <img>) властивість line-height ніяк не впливає, для рядкових елементів властивість line-height задає висоту рядка блоку.

Будь-яке число більше нуля сприймається як множник від розміру шрифту поточного тексту. Наприклад, значення 1.5 встановлює полуторний міжрядковий інтервал. Як значення приймаються також будь-які одиниці довжини, прийняті в CSS - пікселі (px), дюйми (in), пункти (pt) та ін. Дозволяється використовувати процентний запис, в цьому випадку за 100% береться висота шрифту.

правити

Загальний опис

правити

Порада

Також зверніть увагу на такі властивості як letter-spacing та word-spacing.

автор: Svitlana правити

Нотатка

Від'ємні значення не підтримуються.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

line-height: normal|number|length|initial|inherit;

Властивість line-height може отримувати 6 значень:

normal

Звичайна висота рядка. Без задання.

автор: Svitlana

правити

number

Число, яке буде множитися на поточний розмір шрифту, щоб встановити висоту рядка

автор: Svitlana

правити

length

Фіксована висота рядка в px, pt, cm та інші величини прийняті в CSS.

автор: Svitlana

правити

%

Висота рядка у відсотках. Залежить від розміру шрифту.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	7	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<p class="small">Стиснуті рядки: цей абзац навмисно довгий, щоб він зайняв кілька рядків і міжряддя було добре видно.</p>
<p class="big">Розріджені рядки: цей абзац теж навмисно довгий, щоб зайняти кілька рядків і показати подвійне міжряддя.</p>

p.small {
    line-height: 90%;
}

p.big {
    line-height: 200%;
}

<p>Вибери потрібне значення для <code>line-height</code>:</p>

<input type="number" value="0" min="0" id="field"></input>

<div id="block">Привіт, я рядочок тексту :)<br>А я ще один<br>І я теж рядочок тексту!</div>

body {
	padding: 36px;
  text-align: center;
  line-height: 1.45;
  font-size: 20px;
  font-family: sans-serif;
}

#field {
  padding: 8px;
}

#block {
  border-radius: 4px;
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .45);
  padding: 36px;
  text-align: center;
  background: gold;
  margin: 36px auto 0 auto;
  transition: letter-spacing .15s ease-in 0s;
  letter-spacing: 0;
}

var block = document.getElementById('block');

document.getElementById('field').onchange = function () {
  block.style.lineHeight = this.value + 'px';
};
//# sourceURL=pen.js

<div class="bad">
    <p>Батько: line-height: 1.2em</p>
    <p class="big">Великий текст успадкував готову висоту рядка в пікселях, і рядки налізли один на одного.</p>
</div>

<div class="good">
    <p>Батько: line-height: 1.2</p>
    <p class="big">Великий текст успадкував множник і порахував висоту рядка від власного розміру шрифту.</p>
</div>

.bad,
.good {
    width: 260px;
    margin-bottom: 16px;
    padding: 8px;
    border: 1px solid #666;
    font-size: 14px;
}

.bad {
    line-height: 1.2em;
}

.good {
    line-height: 1.2;
}

.big {
    font-size: 28px;
}

<p>This is very<br> long string. Do not<br> worry about it...</p>
<p class="change">This is very<br> long string. Do not<br> worry about it... ( <code>line-height: 36px;</code> )</p>

p {
	background-color: #eee;
	padding: 16px;
	font-size: 18px;
}

.change {
	line-height: 36px;
}