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

CSS свойства

Определение и применение

CSS свойство text-indent задает отступ первой строки в текстовом блоке (красная строка).

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
text-indent1.01.03.51.03.012.0

CSS синтаксис:

text-indent:"length | initial | inherit";

JavaScript синтаксис:

object.style.textIndent = "40%"

Значения свойства

ЗначениеОписание
lengthОпределяет размер отступа в единицах измерения CSS (px, pt, cm, em, и т.д.). Значение по умолчанию 0.
Допускается использование отрицательных значений, при этом, первая строка будет иметь отступ слева.
%Определяет размер отступа в процентах.
Допускается использование отрицательных значений, при этом, первая строка будет иметь отступ слева.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Да.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Свойство text-align.</title>
<style> 
.test {
text-indent : 0px; /* задаём отступ для первой строки текстового блока 0px (это значение по умолчанию). */
width : 500px; /* задаём ширину текстового блока. */
}
.test2 {
text-indent : 40px; /* задаём отступ для первой строки текстового блока 40px. */
width : 500px; /* задаём ширину текстового блока. */
}
.test3 {
text-indent : -20px; /* задаём отрицательный отступ для первой строки текстового блока. */
width : 500px; /* задаём ширину текстового блока. */
}
</style>
</head>
	<body>
		<p class = "test">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
		<p class = "test2">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
		<p class = "test3">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
	</body>
</html>
Пример указания отступа первой строки в текстовом блоке, используя CSS.
Пример указания отступа первой строки в текстовом блоке, используя CSS.
CSS свойства