CSS text-indent Property

Description

The text-indent property specifies the indentation to be used in the first line of the element block. The indent is treated as a margin applied to the start edge of the line box.

Initial value: 0
Applies to: Block containers
Inherited: Yes
Media: Visual
Computed value: Percentage or absolute length
Animatable: No
CSS Version: CSS1, CSS2, CSS3
JavaScript syntax: object.style.textIndent

Syntax

text-indent: [ <length> | <percentage> ] && hanging? && each-line?

Values

<length>Gives the amount of the indent as an absolute length.
<percentage>Gives the amount of the indent as a percentage of the containing block's logical width.
each-lineIndentation 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.
hangingInverts which lines are indented. All lines except the first line will be indented.
inherit

Example

HTML

<p class="test">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 

<p class="test2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 

<p class="test3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

CSS

.test {
   text-indent: 0px;
   width: 500px;
}
.test2 {
   text-indent: 40px; 
   width: 500px; 
}
.test3 {
   text-indent: -20px;
   width: 500px; 
}

Result

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop

3	12	1	1	3.5	1

Tablets / Mobile

≤37	18	4	14	1	1.0

Last updated by CSSPortal on: 3rd November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu