text-indent

The text-indent property sets the indent value of the first line of a block of text (for example, for a paragraph).

Initial Value 0
Applies to Block elements
Inheritance yes
Animation length & percentage values, calc()

The text-indent property specifies the width of the indent to be inserted on the first line of text.

This feature is used, for example, to reproduce the indentation of paragraphs found in standard typesetting.

Specifically, it allows you to adjust the width of the whitespace that can be specified at the beginning of a line in the box’s content area.

The default value is 0, so no indentation will occur unless the value is changed.

Syntax

Values can be any CSS unit of length – for example, pixels (px), inches (in), pt, etc. The first line indent is calculated according to the block’s width if you set the value as a percentage. It is possible to use negative values, but this might have differing effects on various browsers.

/* length values */

text-indent: 2mm;
text-indent: 25px;

/* percentage value relative to the block containers width */

text-indent: 10%;

/* Keyword values */

text-indent: 4em each-line;
text-indent: 4em hanging;
text-indent: 4em hanging each-line;

/* Global values */

text-indent: inherit;
text-indent: initial;
text-indent: unset;

Description

valuewhat it does
lengthSpecifies the padding size in CSS units (px, pt, cm, em, etc.). The default value is 0.
Negative values ​​are allowed; however, the first line will be indented on the left.
%Specifies the indent size in percent.
Negative values ​​are allowed; however, the first line will be indented on the left.
initialSets a property to its default value.
inheritSpecifies that the value is inherited from the parent element.

Example

text-indent: 15%;

Vestibulum at porttitor nibh. Maecenas suscipit felis purus, sit amet mollis orci faucibus id. Donec vitae tristique est. Suspendisse consequat mauris non lacus commodo dapibus. Cras congue sagittis rhoncus. Cras aliquam mi ac arcu pulvinar malesuada. Proin tempor sodales enim in ullamcorper.

text-indent: 3em;

Vestibulum at porttitor nibh. Maecenas suscipit felis purus, sit amet mollis orci faucibus id. Donec vitae tristique est. Suspendisse consequat mauris non lacus commodo dapibus. Cras congue sagittis rhoncus. Cras aliquam mi ac arcu pulvinar malesuada. Proin tempor sodales enim in ullamcorper.