Свойство text-indent устанавливает красную строку для текста (то есть отступ первой строки). Может быть как положительным, так и отрицательным.

Синтаксис

селектор {
	text-indent: CSS единицы | проценты | inherit;
}

Значения

Значение Описание
CSS единицы Делает отступ первой строки в заданных единицах.
% Отступ первой строки вычисляется в зависимости от ширины блока.
inherit Наследует значение родителя.

Значение по умолчанию: 0.

Примеры

Пример

Давайте сделаем отступ первой строки каждого абзаца в 30px:

p {
	text-indent: 30px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

Давайте установим text-indent в отрицательное значение:

p {
	padding-left: 30px; 
	text-indent: -30px; 
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.