| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Змінити відстань між абзацами тексту створюваних з допомогою тега <p>.
Рішення
При використанні тегу <p> додаються автоматично відступи зверху і знизу від текстового абзацу. Це зроблено для того, щоб візуально відокремити один блок від наступного тексту. Зрозуміло, що відступу, які задані за умовчанням, не влаштовують завжди, тому іноді їх доводиться зменшувати або збільшувати. Для цього можна використовувати універсальне властивість margin, воно визначає відступи з усіх сторін абзацу або margin-top відступ зверху і margin-bottom відступ знизу (приклад 1).
Приклад 1. Зміна значення відступів у абзацу
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Відступи в тексті</title>
<style>
p {
margin-top: 0.5 em; /* Відступ зверху */
margin-bottom: 1em; /* Відступ знизу */
}
</style>
</head>
<body>
<p>Мені тринадцятий минало.<br>
Я пас ягнята за селом.<br>
Чи то так сонечко сіяло,<br>
Чи так мені чого було?<br>
Мені так любо, любо стало,<br>
Неначе в Бога......<br>
Уже прокликали до паю,<br>
А я собі у бур’яні<br>
Молюся Богу... І не знаю,<br>
Чого маленькому мені<br>
Тойді так приязно молилось,<br>
Чого так весело було.<br>
Господнє небо, і село,<br>
Ягня, здається, веселилось!<br>
І сонце гріло, не пекло!</p>
</body>
</html>
Результат прикладу показаний ні рис. 1.
Рис. 1. Відстань між абзацами тексту
В даному прикладі застосовуються різні відступи зверху і знизу від абзацу. Це особливо має значення, коли в тексті зустрічаються зображення і підзаголовки.