text-indent
Quick Summary for text-indent
The text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a block.
Code Usage for text-indent
/* <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: revert; text-indent: unset; 
More Details for text-indent

text-indent

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: revert; 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 definition

Initial value0
Applies toblock containers
Inheritedyes
Percentagesrefer to the width of the containing block
Computed valuethe percentage as specified or the absolute length, plus any keywords as specified
Animation typea length, percentage or calc();

Formal syntax

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

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

Examples

Simple indent

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; } 
Result

Skipping indentation on the first paragraph

A common typographic practice when paragraph indentation is present is to skip the indentation for the first paragraph. As the The Chicago Manual of Style puts it, "the first line of text following a subhead may begin flush left or be indented by the usual paragraph indention."

Treating first paragraphs differently from subsequent paragraphs can be done using the adjacent sibling combinator, as in the following example:

HTML
<h2>Lorem ipsum</h2>  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu venenatis quam. Vivamus euismod eleifend metus vitae pharetra. In vel tempor metus. Donec dapibus feugiat euismod. Vivamus interdum tellus dolor. Vivamus blandit eros et imperdiet auctor. Mauris sapien nunc, condimentum a efficitur non, elementum ac sapien. Cras consequat turpis non augue ullamcorper, sit amet porttitor dui interdum.</p>  <p>Sed laoreet luctus erat at rutrum. Proin velit metus, luctus in sapien in, tincidunt mattis ex. Praesent venenatis orci at sagittis eleifend. Nulla facilisi. In feugiat vehicula magna iaculis vehicula. Nulla suscipit tempor odio a semper. Donec vitae dapibus ipsum. Donec libero purus, convallis eu efficitur id, pulvinar elementum diam. Maecenas mollis blandit placerat. Ut gravida pellentesque nunc, in eleifend ante convallis sit amet.</p>  <h2>Donec ullamcorper elit nisl</h2>  <p>Donec ullamcorper elit nisl, sagittis bibendum massa gravida in. Fusce tempor in ante gravida iaculis. Integer posuere tempor metus. Vestibulum lacinia, nunc et dictum viverra, urna massa aliquam tellus, id mollis sem velit vestibulum nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vulputate leo ut iaculis ultrices. Cras egestas rhoncus lorem. Nunc blandit tempus lectus, rutrum hendrerit orci eleifend id. Ut at quam velit.</p>  <p>Aenean rutrum tempor ligula, at luctus ligula auctor vestibulum. Sed sollicitudin velit in leo fringilla sollicitudin. Proin eu gravida arcu. Nam iaculis malesuada massa, eget aliquet turpis sagittis sed. Sed mollis tellus ac dui ullamcorper, nec lobortis diam pellentesque. Quisque dapibus accumsan libero, sed euismod ipsum ullamcorper sed.</p> 
CSS
p {     text-align: justify;     margin: 1em 0 0 0; } p + p {     text-indent: 2em;     margin: 0; } 
Result

Percentage indent

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; } 
Result

Specifications

Specification
CSS Text Module Level 3 # text-indent-property

See also

Learn to style HTML using CSS Related CSS properties: text-justify text-orientation text-overflow text-rendering text-transform CSS Text Decoration CSS module CSS Text module Select your preferred language English (US)DeutschFrançais日本語Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
therock Somewhere along this crazy road I learned (often times the hard way) the most important things I can do is be authentic, trust my gut, be the hardest worker in the room, celebrate the mistakes, be a grateful man and always remember that it's nice to be important, but it's more important to be nice.
The Rock
Random CSS Property

:not()

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.
:not css reference