Як змінити відстань між рядками в html, webkwondo
Відстань між рядками називається інтерліньяж. Красивим французьким словом interligne - «написане між рядків«, междустрочіе.
По-англійськи «відстань між рядками» звучить як line spacing (line - лінія, рядок; space - відстань, космос) або більш давньо lead, leading.
Взагалі, lead - це свинець. І такий збіг не випадковий. У середньовіччі ... (як щас пам'ятаю) текст збирався з опуклих свинцевих літер (від латинського littera - буква), виготовлених, природно, в дзеркальному відображенні (малюнок вище). «Збирач» хоч і вставляв літери зліва направо, але зате верх ногами і від низу до верху (а вам слабо?). Букви збиралися в рядки на металевій штуці, званої складальної версткою (composing stick), потім верстки скріплювалися разом і утворювали прототип сторінки - друковану форму (forme), яка в свою чергу прикріплювалася до друкованої дошці (galley) на друкарському верстаті, змащувалася чорнилом, і , нарешті, все це друкується на папері. Ну, не всі ... тільки букви.
Так ось. Для того, щоб збільшити інтерліньяж. між рядками вставляли шпони - тонкі пластинки свинцю, товщиною в 2 пункти в системі Дідо (в цій системі 1 пункт = 0,376 мм, тобто виходить, шпон був товщиною менше одного міліметра).
Тобто розмір шрифту (point size) - це не «зростання» самої літери «х» (такий «зростання» в типографике називається x-height = ікс-висота), а ще й плече знизу і відстань зверху.
Висловлюючись типографським, інтерліньяж - це вертикальна відстань між базовими лініями двох сусідніх рядків. Зауважте, це не пробіл між рядками, це СУМА висоти рядка І наступного внизу пробілу. Саме тому, коли інтерліньяж вимірюють множником, наприклад, 1,8, це означає, що сам пробіл між рядками буде 0,8 від висоти шрифту. Якщо ви поставите інтерліньяж = 0,8, то рядки у вас будуть заїжджати один на одного, так як висота рядка буде менше, ніж висота шрифту. Це ж станеться і в тому випадку, якщо ви виставите інтерліньяж = 9 пунктів, при розмірі шрифту 12.
Отже, тепер про головне. Щоб змінити відстань між рядками в HTML. вам не потрібно забивати шпони. Вам потрібно всього лише до об'єкта, в якому ви хочете це відстань відрегулювати, наприклад, до абзацу тексту (тег
) Або до блокового елементу (
), Застосувати CSS-властивість line-height. Властивість може застосовуватися до всіх тегам HTML.
Значення у line-height можна задавати у відсотках, множником, одиницями виміру (пікселі (px), пункти (pt), пайки (pc) і т.д.), а також воно може приймати значення normal і inherit.
При normal відстань між рядками обчислюється браузером автоматично за своїми міркувань, при inherit - успадковується значення батьківського елемента, тобто тега, в який даний тег вкладений.
Черкніте кілька рядків на HTML.
Ось так виглядає в браузері відстань між рядками в абзаці зі значенням 1 (тобто одинарний інтерліньяж) і 70% у заголовка (зауважте що при розрахунку в% за 100% береться висота шрифту):
Якщо ми поставимо line-height для тега
, огортає і заголовок, і абзац, а у них, відповідно, це властивість приберемо, то вийде:
line-height </ title> <br> <style></p>
<p><div style="text-align:center;"><img src="https://webp.images-on-off.com/24/681/424x277_gof57wbrs8ya8fsqeura.webp" width="424" height="277" title="Як змінити відстань між рядками в html, webkwondo (відстань)" alt="Як змінити відстань між рядками в html, webkwondo" ></div></p>
<p>Якщо ми поставимо line-height = 0.4, вийде експонат негативного інтерліньяжу:</p>
<p><div style="text-align:center;"><img src="https://webp.images-on-off.com/24/681/424x205_w1zzlvob7lekjdm7k46u.webp" width="424" height="205" title="Як змінити відстань між рядками в html, webkwondo (змінити)" alt="Як змінити відстань між рядками в html, webkwondo" ></div></p>
<p>Навіщо ж взагалі з відстанню між рядками щось роблять? Через шкідливості? Від нічого робити?</p></div>
<div class="extra">
<div class="clear"></div>
</div>
</article>
</div>
</div>
</div>
</div>
<div id="sidebar" class="col-1-3">
<div class="wrap-col">
<div class="box">
<div class="content">
<ul>
<li><a href="/articles/recept-gusariki.html">Рецепт - гусарікі</a></li>
<li><a href="/articles/girskij-big.html">гірський біг</a></li>
<li><a href="/articles/kurka-z-pomidorami-v-duhovci-pokrokovij-recept-z.html">Курка з помідорами в духовці - покроковий рецепт з фото, і смачно і просто</a></li>
<li><a href="/articles/chervonij-kolir-uvi-sni.html">Червоний колір уві сні</a></li>
<li><a href="/articles/veterinarnij-preparat-tetramizol.html">Ветеринарний препарат тетрамізол</a></li>
<li><a href="/articles/vrjatujte-nashi-dushi-abo-jak-pravilno-podati.html">Врятуйте наші душі! Або як правильно подати сигнал лиха - портал</a></li>
<li><a href="/articles/jak-namaljuvati-sobaku-chihuahua.html">Як намалювати собаку чихуахуа</a></li>
<li><a href="/articles/jak-otrimati-rozshirenu-vipisku-z-budinkovoi-knigi-2.html">Як отримати розширену виписку з будинкової книги та для чого вона потрібна</a></li>
<li><a href="/articles/osinnij-makijazh-idei-poradi-dlja-fotosesii-i-tipu.html">Осінній макіяж ідеї, поради для фотосесії і типу обличчя</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="wrap-footer pominodiko">
<div class="row">
<div class="col-1-1">
<div class="wrap-col">
<div class="box">
<div class="content">
<ul>
<li><a href="/articles/zakoni-shariatu.html">закони шаріату</a></li>
<li><a href="/articles/sposobi-likuvannja-insultu-golovnogo-mozku.html">Способи лікування інсульту головного мозку</a></li>
<li><a href="/articles/insult-pravogo-boku.html">Інсульт правого боку</a></li>
<li><a href="/articles/pislja-smerti-pensionera-pokladena-viplata-2.html">Після смерті пенсіонера покладена виплата 2 пенсій</a></li>
<li><a href="/articles/farba-mietsja-lateksna-akrilova-vodoemulsijna.html">Фарба миється латексна, акрилова, водоемульсійна, інтер’єрна</a></li>
<li><a href="/articles/divitisja-film-gotel-dlja-popeljushki-onlajn.html">Дивитися фільм готель для попелюшки онлайн безкоштовно в хорошій якості</a></li>
<li><a href="/articles/jak-nazivaetsja-pidjomnij-mehanizm-kolodjazja.html">Як називається підйомний механізм колодязя</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright © 2026</p>
<ul>
<li><a href="/articles/vidmak-2-prohodzhennja-shljah-roshe.html">Відьмак 2 проходження шлях роше</a></li>
<li><a href="/articles/suchasni-principi-svitovogo-festivalnogo-ruhu.html">Сучасні принципи світового фестивального руху, типологія сучасних фестивалів - фестиваль</a></li>
<li><a href="/articles/oformlennja-korobki-cukerok-do-dnja-vchitelja.html">Оформлення коробки цукерок до Дня вчителя</a></li>
<li><a href="/articles/1-oblasnij-klinichnij-onkologichnij-dispanser.html">1 Обласний клінічний онкологічний диспансер, Україна, Полтаваская обл, Полтава, землячки</a></li>
<li><a href="/articles/jnb-retraktori-universalni-2sht.html">Jnb ретрактори універсальні (2шт</a></li>
</ul>
</div>
</footer></div>
</body>
</html> 
