Высота текста html – Как с помощью css подстроить размер текста под размеры блока? — Хабр Q&A

Свойство line-height, высота строки — Оформление текста — HTML Academy

HTML

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Сайт начинающего верстальщика</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h2>Сайт начинающего верстальщика</h2> </header> <main> <img src="img/raccoon.svg" alt="Аватарка"> <nav> <h3>Записи в блоге</h3> <ul> <li><a href="day-1.html">День первый. Как я забыл покормить кота</a></li> <li><a href="day-2.html">День второй. Хочу быть верстальщиком</a></li> <li><a href="day-3.html">День третий. Мой кот на меня обиделся</a></li> <li><a href="day-4.html">День четвёртый. Как я чуть не заболел</a></li> <li><a href="day-5.html">День пятый. Отдыхаю</a></li> <li><a href="day-6.html">День шестой. Как я ничего не понял, продолжение</a></li> <li><a href="day-7.html">День седьмой. Кекс выдал мне задание</a></li> <li><a href="day-8.html">День восьмой. Очень серьёзный</a></li> <li><a href="day-9.html">День девятый. Точнее ночь</a></li> <li><a href="day-10.html">День десятый. Подведение итогов</a></li> <li><a href="day-11.html">День одиннадцатый. Без фанатизма</a></li> <li><a href="day-12.html">День двенадцатый. Все любят печенье</a></li> <li><a href="day-13.html">День тринадцатый. Нашёл статью</a></li> <li><a href="day-14.html">День четырнадцатый. Новый формат</a></li> <li><a href="day-15.html">День пятнадцатый. Галерея селфи</a></li> </ul> </nav> <section> <p>Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл <a href="https://htmlacademy.ru/courses">интерактивные курсы по HTML и CSS</a> и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.</p> <p>Моё первое задание — вести дневник и честно писать обо всех своих свершениях.</p> </section> <section> <h3>Навыки</h3> <dl> <dt>HTML</dt> <dd><div>60%</div></dd> <dt>CSS</dt> <dd><div>20%</div></dd> <dt>JS</dt> <dd><div>10%</div></dd> </dl> </section> </main> <footer> Подвал сайта </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: "Arial", sans-serif; color: #222222; background: #ffffff url("img/bg-page.png") no-repeat top center; } h2 { font-size: 24px; line-height: normal; } h3 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .page-title { font-size: 36px; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; color: #ffffff; background-color: #4470c4; border: 5px solid #2d508f; } .blog-navigation h3 { margin-top: 0; } .blog-navigation ul { padding-left: 0; list-style: none; } .blog-navigation li { margin-bottom: 5px; } .blog-navigation a { color: #ffffff; } .skills dd { margin: 0; margin-bottom: 10px; background-color: #e8e8e8; } .skills-level { font-size: 12px; text-align: center; color: #ffffff; background-color: #4470c4; } .skills-level-ok { background-color: #47bb52; } footer { margin-top: 30px; }

Относительная высота строки — Оформление текста — HTML Academy

HTML

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Сайт начинающего верстальщика</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h2>Сайт начинающего верстальщика</h2> </header> <main> <img src="img/raccoon.svg" alt="Аватарка"> <nav> <h3>Записи в блоге</h3> <ul> <li><a href="day-1.html">День первый. Как я забыл покормить кота</a></li> <li><a href="day-2.html">День второй. Хочу быть верстальщиком</a></li> <li><a href="day-3.html">День третий. Мой кот на меня обиделся</a></li> <li><a href="day-4.html">День четвёртый. Как я чуть не заболел</a></li> <li><a href="day-5.html">День пятый. Отдыхаю</a></li> <li><a href="day-6.html">День шестой. Как я ничего не понял, продолжение</a></li> <li><a href="day-7.html">День седьмой. Кекс выдал мне задание</a></li> <li><a href="day-8.html">День восьмой. Очень серьёзный</a></li> <li><a href="day-9.html">День девятый. Точнее ночь</a></li> <li><a href="day-10.html">День десятый. Подведение итогов</a></li> <li><a href="day-11.html">День одиннадцатый. Без фанатизма</a></li> <li><a href="day-12.html">День двенадцатый. Все любят печенье</a></li> <li><a href="day-13.html">День тринадцатый. Нашёл статью</a></li> <li><a href="day-14.html">День четырнадцатый. Новый формат</a></li> <li><a href="day-15.html">День пятнадцатый. Галерея селфи</a></li> </ul> </nav> <section> <p>Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл <a href="https://htmlacademy.ru/courses">интерактивные курсы по HTML и CSS</a> и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.</p> <p>Моё первое задание — вести дневник и честно писать обо всех своих свершениях.</p> </section> <section> <h3>Навыки</h3> <dl> <dt>HTML</dt> <dd><div>60%</div></dd> <dt>CSS</dt> <dd><div>20%</div></dd> <dt>JS</dt> <dd><div>10%</div></dd> </dl> </section> </main> <footer> Подвал сайта </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: "Arial", sans-serif; color: #222222; background: #ffffff url("img/bg-page.png") no-repeat top center; } h2 { font-size: 24px; } h3 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .page-title { font-size: 36px; line-height: 42px; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; color: #ffffff; background-color: #4470c4; border: 5px solid #2d508f; } .blog-navigation h3 { margin-top: 0; } .blog-navigation ul { padding-left: 0; list-style: none; } .blog-navigation li { margin-bottom: 5px; } .blog-navigation a { color: #ffffff; } .skills dd { margin: 0; margin-bottom: 10px; background-color: #e8e8e8; } .skills-level { font-size: 12px; text-align: center; color: #ffffff; background-color: #4470c4; } .skills-level-ok { background-color: #47bb52; } footer { margin-top: 30px; }

Высота строки HTML — идеальная высота строки HTML