menu
text-indent is the CSS property that adds an indentation into the first line of text in any text element. It’s mainly used to create indented paragraphs and to visually distinguish the first line of text from the rest.
taught by Tina May
You can use pixel, which is the most common way to indent your text.
text-indent:
Tip: Pixel is an absolute unit - it doesn’t scale, so how big it is will always be the same everywhere.
Tuition is valuable, but you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
You can use em which is relative to the text element's font size. How em is calculated will adapt as the font size changes.
text-indent:
Tuition is valuable, but you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
You can use percentage, which is relative to the width of the container element.
text-indent:
Tuition is valuable, but you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
You can use negative value to reverse the direction of the indentation.
text-indent:
Tuition is valuable, but you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.
<div>
<p class="style-1">Tuition is valuable. But you know what's invaluable? Intuition.</p>
<p class="style-2">I know what to do. But in a much more real sense, I had no idea what to do.</p>
<p class="style-3">This morning I saw a youtube video with a puppy riding a motorcycle. So my bar for stunning is pretty high.</p>
</div>Tuition is valuable. But you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
This morning I saw a youtube video with a puppy riding a motorcycle. So my bar for stunning is pretty high.
/* Change the indentation of the first paragraph*/
.style-1 { text-indent: 0; }
/* Change the indentation of the second paragraph*/
.style-2 { text-indent: 20px; }
/* Change the indentation of the third paragraph*/
.style-3 { text-indent: -1em; }
Try changing the indentation of each of the paragraph elements below that we’ve added with a class of ‘style-1’, ‘style-2’ and ‘style-3’. Use different values in pixels, decimal numbers or ems.
Try these (or anything else!):
Copyright 2023