📌 Introduction

The text-indent property in CSS controls the indentation of the first line of text within a block-level element. It is commonly used in paragraphs, articles, books, and readable content layouts to create a clean and professional typography style. ✨

🎯 Why Use text-indent?

🧠 What Does text-indent Do?

It shifts only the first line of text inside an element. The rest of the lines remain unchanged, creating a clean indentation effect.

✨ Syntax

selector {
  text-indent: <length> | <percentage> | hanging | each-line;
}

🧩 Available Values

1. <length>

Use units like px, em, rem, etc.

p {
  text-indent: 40px;
}

2. <percentage>

Percentage is relative to the width of the containing block.

p {
  text-indent: 10%;
}

3. negative values ⛔

Negative indentation pulls the first line to the left.

p {
  text-indent: -20px;
}

4. hanging 🧷

Indicates that all lines except the first one should be indented — creating a “hanging indent’’ often used in lists or citations.

p {
  text-indent: hanging 20px;
}

5. each-line ✨

Applies the indentation to every line in the block container except the first line of the block when text wraps.

p {
  text-indent: each-line 30px;
}

🔥 Practical Examples

1. Classic Paragraph Indent

p {
  text-indent: 2em;
}

2. Blog or Magazine Style

article p {
  text-indent: 1.5rem;
  line-height: 1.6;
}

3. Creative Pull-Left Text

.pull-left {
  text-indent: -30px;
  padding-left: 30px;
}

📊 Comparison Table

🖼️ Visual Example

🎉 Conclusion

The text-indent property is a powerful yet simple tool for controlling how your content begins visually. Whether you're designing a blog, building a reading app, or formatting stylish paragraphs, mastering text-indent brings professional polish to your layouts. 🚀