Our volunteers haven't translated this article into Türkçe yet. Join us and help get the job done!
You can also read the article in English (US).

The text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a block.

Horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block-level element's content box.

Syntax

/* <length> values */
text-indent: 3mm;
text-indent: 40px;

/* <percentage> value
   relative to the containing block width */
text-indent: 15%;

/* Keyword values */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* Global values */
text-indent: inherit;
text-indent: initial;
text-indent: unset;

Values

<length>
Indentation is specified as an absolute <length>. Negative values are allowed. See <length> values for possible units.
<percentage>
Indentation is a <percentage> of the containing block's width.
each-line
Indentation affects the first line of the block container as well as each line after a forced line break, but does not affect lines after a soft wrap break.
hanging
Inverts which lines are indented. All lines except the first line will be indented.

Formal syntax

<length-percentage> && hanging? && each-line?

where
<length-percentage> = <length> | <percentage>

Simple indent example

HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

CSS

p { 
  text-indent: 5em;
  background: powderblue;
}

Percentage indent example

HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

CSS

p { 
  text-indent: 30%;
  background: plum;
}

Specifications

Specification Status Comment
CSS Text Module Level 3
The definition of 'text-indent' in that specification.
Working Draft Adds the hanging and each-line keywords.
CSS Transitions
The definition of 'text-indent' in that specification.
Working Draft Lists text-indent as animatable.
CSS Level 2 (Revision 1)
The definition of 'text-indent' in that specification.
Recommendation The behavior with display: inline-block and anonymous block boxes is explicitly defined.
CSS Level 1
The definition of 'text-indent' in that specification.
Recommendation Initial definition.

Initial value0
Applies toblock containers
Inheritedyes
Percentagesrefer to the width of the containing block
Mediavisual
Computed valuethe percentage as specified or the absolute length, plus any keywords as specified
Animation typea length, percentage or calc();
Canonical orderThe length or percentage before the keywords, if both are present. If several keywords are present, they appear in the same order as their appearance in the formal grammar.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
each-line
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
hanging
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.