text-indent Examples

Indent and Outdent Text with CSS

Return to the text-indent information

Standard Text Indent

This paragraph is indented 1em. Duis aute irure dolor lorem ipsum dolor sit amet, ut enim ad minim veniam. Sunt in culpa ut labore et dolore magna aliqua. Ullamco laboris nisi cupidatat non proident, excepteur sint occaecat. Mollit anim id est laborum.

<p style="text-indent: 1em;">
This paragraph is indented 1em. Duis aute irure dolor lorem ipsum dolor sit amet, ut enim ad minim veniam. Sunt in culpa ut labore et dolore magna aliqua. Ullamco laboris nisi cupidatat non proident, excepteur sint occaecat. Mollit anim id est laborum.
</p>

Return to the text-indent information

Outdent the List Items

Every other line is outdented in this list:

• Lorem ipsum dolor sit amet
• Consectetur adipisicing elit
• Sed do eiusmod tempor incididunt
• Ut labore et dolore magna aliqua
• Ut enim ad minim veniam

Be sure to test this across different browsers. Some browsers outdent the bullet while others do not.

<ul>
<li style="text-indent: -1em;">Lorem ipsum dolor sit amet</li>
<li>Consectetur adipisicing elit</li>
<li style="text-indent: -1em;">Sed do eiusmod tempor incididunt</li>
<li>Ut labore et dolore magna aliqua</li>
<li style="text-indent: -1em;">Ut enim ad minim veniam</li>
</ul>

Return to the text-indent information

Indent a Percentage

Be sure to test this across different browsers. The Internet Explorer box model interprets the parent element incorrectly in some instances.

<div style="width: 200px; border: solid thin black;">
<p style="text-indent: 25%;">Consectetur adipisicing elit, lorem ipsum dolor sit amet, cupidatat non proident. Sed do eiusmod tempor incididunt qui officia deserunt eu fugiat nulla pariatur. Excepteur sint occaecat in reprehenderit in voluptate ut enim ad minim veniam.</p>
</div>

Return to the text-indent information