CSS Text Indent

CSS Text Indent – CSS Tutorial | Shree Narayan Computers & Education Center

CSS COURSE • LESSON

CSS Text Indent

Learn how to indent the first line of a paragraph using the CSS text-indent property. Explore pixel, percentage, negative and practical indentation examples with live demonstrations.

📘 What is CSS Text Indent?

The CSS text-indent property is used to specify the amount of indentation applied to the first line of a block of text.

It is commonly used for paragraphs, articles, newspapers, magazines and other text-heavy layouts.

In simple words: text-indent moves the first line of a paragraph horizontally away from the normal starting position.

🧩 CSS Text Indent Syntax

selector {
    text-indent: value;
}

The value can be specified using units such as px, em, rem, percentages and other valid CSS length values.

💻 Example 1: Basic Text Indent

The following example moves the first line 40 pixels to the right.

p {
    text-indent: 40px;
}

CSS provides many properties for controlling the appearance and layout of text. The text-indent property allows you to move the first line of a paragraph while keeping the remaining lines in their normal position.

📏 Example 2: 20px Indent

p {
    text-indent: 20px;
}

This paragraph has a small first-line indentation. Notice that only the first line moves while the following lines remain in their normal position.

📐 Example 3: 60px Indent

p {
    text-indent: 60px;
}

A larger indentation can be useful for special typography styles, article layouts and educational content where the first line needs additional spacing.

🔤 Using em Units

Relative units such as em can be useful because the indentation scales with the element’s font size.

p {
    text-indent: 2em;
}

Tip: Using em can make indentation more flexible when the font size changes.

🔠 Using rem Units

p {
    text-indent: 2rem;
}

The rem unit is relative to the root element’s font size and can provide consistent sizing across a page.

📊 Using Percentage

A percentage can also be used for text indentation.

p {
    text-indent: 10%;
}

Percentage-based indentation can create a responsive first-line offset that changes according to the available width of the containing block.

↔️ Negative Text Indent

A negative value moves the first line in the opposite direction. This can be useful for special typography and hanging-indent layouts.

p {
    text-indent: -30px;
    padding-left: 30px;
}

This example demonstrates a hanging-indent style. The first line begins farther to the left while the remaining lines begin at the padded position.

▶️ Live Comparison

Compare different indentation values below.

20px indentation: The first line starts slightly farther from the left edge.

40px indentation: The first line starts farther from the normal paragraph position.

60px indentation: The first line has a larger offset.

📰 Practical Example: Article Paragraphs

Text indentation can be used to create a traditional article or textbook-style paragraph appearance.

.article p {
    text-indent: 2em;
    margin-bottom: 16px;
}

Computer education helps learners understand technology and develop practical digital skills. A well-structured paragraph can make educational content easier to read and understand.

CSS provides powerful tools for creating readable and professional web pages. Text indentation is one of the many properties available for controlling typography.

🔍 Text Indent vs Margin

Property	What It Changes
`text-indent`	Moves the first line of text.
`margin-left`	Moves the entire element.
`padding-left`	Adds internal space to the element.

Remember: text-indent normally affects the first line, not every line of the paragraph.

💡 Practical Uses

📚 Educational Content

Create textbook-style paragraphs and lessons.

📰 Articles

Create traditional article and newspaper layouts.

📖 Blog Posts

Add visual separation between paragraph starts.

📝 Hanging Indent

Use negative indentation for special text layouts.

⚠️ Common Mistakes

Expecting text-indent to move the entire paragraph.
Using very large indentation values that reduce readability.
Forgetting that percentage indentation is relative to the containing block.
Using negative indentation without providing enough padding or layout space.
Using indentation where margin or padding would be more appropriate.

Design Tip: Keep paragraph indentation subtle. A common typographic approach is to use a relative value such as 1.5em or 2em.

📝 Practice Exercises

Try these exercises in your HTML Runner:

Create a paragraph with text-indent: 20px;.
Change the indentation to 40px.
Create a paragraph using 2em.
Create a paragraph using 2rem.
Try a percentage value such as 10%.
Create a hanging indent using a negative value.
Compare text-indent with margin-left.

📚 Quick Reference

CSS	Purpose	Example
`text-indent`	Indents the first line of text.	`40px`
`px`	Fixed pixel indentation.	`40px`
`em`	Relative to the element’s font size.	`2em`
`rem`	Relative to the root font size.	`2rem`
`%`	Percentage-based indentation.	`10%`
Negative value	Moves the first line in the opposite direction.	`-30px`