Свойство CSS text-indent служит для задания отступов в начале абзаца.
Синтаксис CSS text-indent
...
text-indent: value;
...
Где value принимает значение в пикселях или в процентах. Например
text-indent: 30px;
...
text-indent: 10%;
Приведем пример с отступом в начале первой строки каждого абзаца в размере 20 пикселей.
Как это выглядит
[html]
<html>
<head>
<style>
p{
border: 1px solid #aaa;
background: #FFDEAD;
text-indent: 20px;
}
</style>
</head>
<body>
<p>Пример с отступом. Выравнивание текста по левому краю. Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</p>
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</p>
</body>
</html>
[/html]
Вот код
<html> <head> <style> p{ border: 1px solid #aaa; background: #FFDEAD; text-indent: 20px; } </style> </head> <body> <p>Пример с отступом. Выравнивание текста по левому краю. Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</p> <p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</p> </body> </html>
Примечание 1
Отступы можно также задавать и более "изощренным" способом. Через знак пробела
Чтобы сделать отступ перед текстом, добавим перед текстом html код пробела - . Например
<p> Пример с отступом. Выравнивание текста по левому краю. Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</p>
<p> Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</p>
Но это стоит делать лишь в редких исключениях. Потому что для этого есть свойство CSS text-indent.
Примечание 2
Бывают и еще более сильные изощрения. Можно в начале каждой строки вставлять "невидимое" изображение или наоборот видимое, если есть цель чем-то приукрасить начало абзаца. Например
<p><img src="otstup.jpg">Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</p>
[good]