Свойство CSS text-indent

Свойство CSS text-indent служит для задания отступов в начале абзаца.

Синтаксис CSS text-indent

...
text-indent: value;
...

Где value принимает значение в пикселях или в процентах. Например

text-indent: 30px;
...
text-indent: 10%;

Пример: как отступ в начале абзаца для первой строки

Приведем пример с отступом в начале первой строки каждого абзаца в размере 20 пикселей.

<html>
<head>
<style>
p{
border: 1px solid #aaa;
background: #FFDEAD;
text-indent: 20px;
}
</style>
</head>
<body>
<p>Пример с отступом. Выравнивание текста по левому краю. Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</p>
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</p>

</body>
</html>

На странице преобразуется в следующее


Пример с отступом. Выравнивание текста по левому краю. Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст





Примечание 1

Отступы можно также задавать и более “изощренным” способом. Через знак пробела

Чтобы сделать отступ перед текстом, добавим перед текстом html код пробела – &nbsp;. Например


<p>&nbsp;&nbsp;&nbsp;Пример с отступом. Выравнивание текста по левому краю. Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</p>
<p>&nbsp;&nbsp;&nbsp;Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</p>


Но это стоит делать лишь в редких исключениях. Потому что для этого есть свойство CSS text-indent.

Примечание 2

Бывают и еще более сильные изощрения. Можно в начале каждой строки вставлять “невидимое” изображение или наоборот видимое, если есть цель чем-то приукрасить начало абзаца. Например


<p><img src="otstup.jpg">Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</p>






Читайте также:

• Свойство text-align

• Свойство display

• letter-spacing

• Свойство transform

• Свойство css border

• Свойство css background

• Свойство css transition

• Свойство overflow

• Медиа запросы (@)


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.