| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Додати відступ першого рядку кожного абзацу.
Рішення
Коли потрібно встановити абзацний відступ, який ще називається червоною рядком, краще всього використовувати стильове властивість text-indent. Його значення визначає наскільки зрушити текст першої рядки праворуч від вихідного положення. Ширина текстового блоку при цьому не змінюється і залишається заданої спочатку. Величину відступу можна вказувати в пікселях, відсотках або інших доступних одиницях (приклад 1).
Приклад 1. Відступ першого рядка
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Відступ першого рядка</title>
<style>
p {
text-indent: 20px; /* Відступ першого рядка в пікселях */
}
</style>
</head>
<body>
<p>Вавілонським стовпотворінням, за біблійними переказами, називається невдала спроба царя Німрода збудувати у Вавілоні стовп висотою до неба. Бог, розгнівавшись на людей за їх безрозсудне бажання, вирішив покарати будівельників: він змішав їх мову так, що вони перестали розуміти один одного, змушені були припинити будівництво і мало-помалу розсіялися по світу. Звідси, як пояснювали давні люди, і пішла відмінність між мовами.</p>
<p>У звичайному розумінні вавилонське стовпотворіння означає безладдя, плутанину при великому скупченні народу.</p>
</body>
</html>
Результат цього прикладу показано на рис. 1.
Рис. 1. Вигляд тексту з відступами першого рядка