Presets

Target Element

Indent Type

First line indented, subsequent lines at margin (traditional paragraph style).

Indent Amount

"each-line" applies indent after each forced line break (br, or block break). Limited browser support.

Live Preview

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Comparison

No Indent

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q...

With Indent

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q...

Indent Types

First Line Indent

Traditional paragraph indentation where the first line is indented. Common in books and printed materials.

Hanging Indent

Hanging indent where first line starts at the margin and subsequent lines are indented. Used for bibliographies and references.

No Indent

Block style with no indentation. Often paired with extra spacing between paragraphs. Common in web content.

Negative Indent

Outdented first line extends past the margin. Used for special typographic effects and bullet-style layouts.

Generated CSS

.indented-text {
  text-indent: 2em;
}

Usage Examples

Traditional Book Style

/* First line indent for paragraphs */
p + p {
  text-indent: 1.5em;
}

/* First paragraph has no indent */
p:first-of-type {
  text-indent: 0;
}

Bibliography / References

.bibliography-entry {
  text-indent: -3em;
  padding-left: 3em;
  margin-bottom: 0.5em;
}

/* Each entry hangs after first line */

Block Style (No Indent)

/* Modern web style */
article p {
  text-indent: 0;
  margin-bottom: 1em;
}

/* Uses spacing instead of indentation */

Definition List Style

.definition {
  text-indent: -2em;
  padding-left: 2em;
}

.definition strong {
  display: inline-block;
  width: 2em;
}

/* Term at margin, definition indented */

Poetry / Verse

.poem-stanza p {
  text-indent: 0;
  margin-bottom: 0;
}

.poem-stanza p.continuation {
  text-indent: 2em;
}

/* Continuation lines indented */

Responsive Indentation

article p {
  text-indent: clamp(0em, 2vw, 2em);
}

/* Scales with viewport, capped at 2em */

@media (max-width: 768px) {
  article p {
    text-indent: 1em; /* Smaller on mobile */
  }
}

CSS Variables

:root {
  --indent-standard: 2em;
  --indent-bibliography: 3em;
  --indent-poetry: 4ch;
}

.content p {
  text-indent: var(--indent-standard);
}

.bibliography-entry {
  text-indent: calc(-1 * var(--indent-bibliography));
  padding-left: var(--indent-bibliography);
}

Reference

text-indent Syntax

/* Length values */
text-indent: 3em;
text-indent: 40px;
text-indent: 15%;   /* of containing block width */

/* Keywords */
text-indent: 2em each-line;  /* After forced breaks */
text-indent: 2em hanging;    /* Invert (all but first) */

/* Global values */
text-indent: inherit;
text-indent: initial;
text-indent: revert;
text-indent: unset;

Unit Guide

UnitDescriptionBest For
emRelative to font sizeMost text indentation
remRelative to root font sizeConsistent across elements
pxFixed pixel valuePrecise control
%Of containing block widthResponsive layouts
chWidth of "0" characterCode, monospace text

Browser Support

FeatureChromeFirefoxSafariEdge
text-indent (basic)1+1+1+12+
Percentage values1+1+1+12+
each-line keywordNoNoNoNo
hanging keywordNoNoNoNo

Note: "each-line" and "hanging" keywords have no current browser support. Use negative text-indent with padding-left for hanging indent effect.

Best Practices

  • Use em units for indentation to scale with text size
  • For hanging indents, use negative text-indent paired with padding-left
  • Don't indent the first paragraph after a heading (use p + p selector)
  • Consider using clamp() for responsive indentation
  • For accessibility, ensure sufficient line height with indented text
  • Use consistent indentation throughout your document
  • Choose between indentation OR paragraph spacing, not both

Common Issues

  • Indent on inline elements: text-indent only works on block-level elements
  • Hanging indent breaking: Ensure padding-left equals the absolute value of text-indent
  • Percentage quirks: Percentages are relative to containing block width, not content
  • List items: Use padding-left on lists, not text-indent

Rate this tool