🔠 CSS text-indent — Indenting the First Line of Text

The text-indent property in CSS lets you control the indentation of the first line of text in a block element like a paragraph. It’s a small typographic detail with big effects on readability and design.

---

🔹 What Does text-indent Do?

It moves only the first line of a block of text to the right (or left, depending on direction), creating a visual cue for the start of a paragraph — similar to what you’d see in books or print layouts.

---

📘 Syntax

selector {
  text-indent: <length> | <percentage> | inherit;
}

---

💡 Value Types

Value Type	Example	Description
Length	2em, 30px	Indents by a fixed length or relative unit
Percentage	10%	Based on the width of the containing element
Negative	-2em	Pulls the first line left, creating a “hanging indent”
inherit	—	Inherits from parent element

---

✍️ Example: Traditional Paragraph Indentation

<p class="indented">
  The first line of this paragraph is indented using CSS.
</p>

.indented {
  text-indent: 2em;
}

🧠 2em means the indent is twice the current font size, which scales with the text.

---

✍️ Example: Hanging Indent (Used in Bibliographies)

.hanging-indent {
  text-indent: -1.5em;
  padding-left: 1.5em;
}

✅ This causes the first line to hang to the left, while the rest of the paragraph is aligned inward.

---

🖼️ Image Idea: Visual Demo of text-indent

Image Description:

• Three paragraphs side-by-side:
  • Normal paragraph (no indent)
  • Paragraph with text-indent: 2em
  • Paragraph with text-indent: -1.5em (hanging)

🎯 Purpose: Show how text shifts visually depending on text-indent.

---

🧠 When to Use text-indent

Use Case	Why Use It
Books, articles, essays	Visually separate paragraphs
Legal documents or PDFs	Traditional formatting
Hanging lists or references	Keep labels aligned while indenting text
Stylized blockquotes or intros	Add emphasis without using margins

---

⚠️ Tips & Considerations

• text-indent affects only the first line of a block-level element.
• It does not affect alignment or justify the text.
• Use padding or margin instead if you want to move the entire block.

---

✅ Summary

Property	text-indent
Purpose	Indent the first line of a block of text
Values	Length (px, em), %, or inherit
Use with	Paragraphs, quotes, lists, references
Common use cases	Typographic structure, legal docs, design