text-indent

lets take a look at the text-indent property

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

text-indent can be set with pixel unit

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.

text-indent can be set with em unit

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.

text-indent can be set with percentage

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.

the direction of text-indent can be reversed

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.

explore all typography properties

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.

color

font-family

font-size

font-style

font-weight

font

letter-spacing

line-height

list-style

text-align

text-decoration

text-indent

text-overflow

text-shadow

text-transform

vertical-align

word-spacing

Try it for yourself

HTML

<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.

CSS

/* 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; }

reults

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