AI CSS Text Indent — First Line Indent and Hanging Indent Techniques

Print typography has used first-line indentation for centuries to signal the start of a new paragraph. On the web, most developers skip indentation entirely and rely on vertical spacing between paragraphs instead. But when you need that polished, book-like feel — or when you are building bibliographies, legal documents, or glossaries that require hanging indents — the CSS text-indent property is exactly the tool you need.

An AI CSS text-indent generator helps you dial in the right indentation values, preview how paragraphs look with different indent styles, and export clean CSS without guessing at pixel values or fighting negative margins.

How CSS Text Indent Works

The text-indent property controls the horizontal offset of the first line of text inside a block element. It accepts length values, percentages, and even the each-line and hanging keywords in modern browsers:

/* Basic first-line indent */
.paragraph {
  text-indent: 2em;
}

/* Percentage-based indent (relative to container width) */
.responsive-indent {
  text-indent: 5%;
}

/* No indent (default) */
.flush-left {
  text-indent: 0;
}

The value 2em is a common choice because it scales with the font size. If your body text is 16px, the indent will be 32px. Bump the font to 18px and the indent adjusts automatically. Percentages work well for fluid layouts where the indent should scale with the container width rather than the font size.

First-Line Indentation Patterns

Traditional book typography indents every paragraph except the first one after a heading. You can replicate this pattern in CSS without adding classes to every paragraph:

/* Indent all paragraphs */
article p {
  text-indent: 1.5em;
  margin-bottom: 0; /* remove spacing between paragraphs */
}

/* Remove indent from first paragraph after heading */
article h2 + p,
article h3 + p {
  text-indent: 0;
}

This approach removes the vertical gap between paragraphs and uses indentation as the sole paragraph separator, just like a printed book. The adjacent sibling selector (+) ensures the first paragraph after any heading starts flush left, which is the typographic convention.

Responsive Indentation

On small screens, a 2em indent can eat into already limited horizontal space. Scale the indent down for mobile viewports:

.prose p {
  text-indent: 2em;
}

@media (max-width: 640px) {
  .prose p {
    text-indent: 1em;
  }
}

Alternatively, use clamp() for a single declaration that adapts smoothly across screen sizes:

.prose p {
  text-indent: clamp(1em, 3vw, 2.5em);
}

This sets a minimum indent of 1em, a preferred value of 3% of the viewport width, and a maximum of 2.5em. For more responsive techniques, check our CSS media query breakpoints guide.

Hanging Indents with Negative Values

A hanging indent is the opposite of a first-line indent: the first line sits flush left while all subsequent lines are indented. This is standard formatting for bibliographies, reference lists, and glossary entries. CSS achieves this with a negative text-indent combined with padding-left:

/* Classic hanging indent */
.bibliography-entry {
  text-indent: -2em;
  padding-left: 2em;
}

/* Hanging indent for definition lists */
.glossary dt {
  text-indent: -1.5em;
  padding-left: 1.5em;
  font-weight: 700;
}

The negative text-indent pulls the first line back to the left, while padding-left pushes all content to the right. The two values must match (one negative, one positive) to keep the first line aligned with the container edge.

APA and MLA Citation Formatting

Academic citation styles require hanging indents. Here is how to format APA-style references:

.apa-reference {
  text-indent: -0.5in;
  padding-left: 0.5in;
  margin-bottom: 12px;
  line-height: 2;
}

/* MLA works cited (similar but different line spacing) */
.mla-citation {
  text-indent: -0.5in;
  padding-left: 0.5in;
  margin-bottom: 0;
  line-height: 2;
}

Both APA and MLA specify a half-inch hanging indent. Using 0.5in as the unit matches the style guide exactly, though you could convert to 3em or 48px for consistency with the rest of your stylesheet.

Advanced Text Indent Techniques

The Image Replacement Trick

Before modern CSS, developers used a large negative text-indent to hide text and replace it with a background image. While this technique is mostly obsolete thanks to SVG and icon fonts, you may still encounter it in legacy codebases:

/* Legacy image replacement (avoid in new code) */
.logo-old {
  text-indent: -9999px;
  background: url('logo.png') no-repeat;
  width: 200px;
  height: 60px;
  overflow: hidden;
}

/* Modern approach: use visually-hidden text */
.logo-modern {
  display: flex;
  align-items: center;
}
.logo-modern .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}

The -9999px trick creates an enormous invisible box that can cause performance issues on some devices. If you need to hide text for accessibility while showing an image, use the sr-only pattern instead.

Indenting Lists and Nested Content

Combining text-indent with list styling creates clean, professional numbered lists. For custom list formatting, see our CSS counter generator guide:

/* Custom numbered paragraphs */
.legal-clause {
  text-indent: -3em;
  padding-left: 3em;
  margin-bottom: 16px;
}

.legal-clause::before {
  content: counter(clause) ". ";
  counter-increment: clause;
  font-weight: 700;
}

Browser Support and Gotchas

The basic text-indent property has universal browser support. However, there are a few things to watch for:

• The hanging and each-line keywords are part of CSS Text Level 3 but have limited browser support — use the negative value technique instead for reliable hanging indents
• text-indent only affects the first line of a block element — it does not work on inline elements
• When using negative values, always pair with matching padding-left to prevent text from overflowing outside the container
• The property is inherited, so setting it on a parent affects all child block elements unless overridden

For multi-column layouts where indentation interacts with column breaks, see our CSS multi-column layout guide.

Generate Your Indent Styles

Whether you need classic first-line indentation for long-form articles, hanging indents for academic citations, or responsive indent values that adapt to screen size, the AI CSS Text Indent Generator lets you preview every combination in real time. Adjust values, see the result instantly, and export production-ready CSS.

Pair the AI CSS Text Indent Generator with our CSS line-clamp tool for text truncation and CSS writing mode for multilingual layouts to build a complete typographic system for any content type.