Чтобы текст был более читаемым, необходимо наличие свободного пространства в блоке для этого текста. Вокруг текста должно быть достаточно «воздуха», он не должен «прилипать» к краям, ему не должно быть «тесно».
За отступы в CSS отвечают два свойства: padding задаёт внутренние отступы в блоке, а margin задаёт внешние отступы. Пример, как можно их использовать:
p {
padding: 10px;
margin: 20px 0;
}
В примере выше задан внутренний отступ со всех сторон 10px, а также внешний отступ сверху и снизу 20px и 0px слева и справа. Это составные свойства. Подробно padding и margin разбираются в части «Блочная модель документа».
Посмотрите на блок aside на нашем сайте. Блоку явно не хватает отступов, давайте добавим их!
index.html
style.css
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Дневник начинающего верстальщика</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<p class="page-title">Блог</p>
<nav class="blog-navigation">
<a href="index.html">На главную</a>
</nav>
</header>
<main>
<article>
<h1>День второй. Хочу быть верстальщиком</h1>
<p>Сегодня весь вечер просидел в интернете. Читал про преимущества работы верстальщиком. Часто отвлекался на видео с котиками, конечно, но кое-что я запомнил:</p>
<ul>
<li>ты делаешь полезное дело</li>
<li>можешь работать удалённо</li>
<li>интересные люди</li>
<li>хорошая зарплата</li>
</ul>
<p>Желания учиться резко прибавилось.</p>
</article>
<aside class="partnership">
Тут могла быть ваша реклама
</aside>
</main>
<footer>
Подвал сайта
</footer>
</body>
</html>