text-indent

Overview

The text-indent property modifies the horizontal spacing of the first line in a text block, influencing its position within a block-level element. The adjustment occurs from the left edge in left-to-right layouts and vice versa for right-to-left layouts. The property predominantly applies to the first line or lines after a forced line break, moving them relative to the containing block's edge.

Examples and Usage

The following example will demonstrate the use of text-indent with different values - an absolute length (px), a relative length (em), and a percentage. Each rule is used on a paragraph of text within a div element. The div is styled with a light blue background to clearly define the containing block and illustrate the effect properly.

HTML Structure

<h2>text-indent: 40px:</h2>

<div class="px-value">
  <p>Imagine being able to declare strings that can span multiple lines and still retain their formatting, or even being able to embed expressions directly into your strings. That's exactly what Template Literals allow us to do.</p>
</div>

<h2>text-indent: -1em:</h2>

<div class="negative-value">
  <p>Imagine being able to declare strings that can span multiple lines and still retain their formatting, or even being able to embed expressions directly into your strings. That's exactly what Template Literals allow us to do.</p>
</div>

<h2>text-indent: 10%:</h2>

<div class="percentage-value">
  <p>Imagine being able to declare strings that can span multiple lines and still retain their formatting, or even being able to embed expressions directly into your strings. That's exactly what Template Literals allow us to do.</p>
</div>

CSS Styling

div {
  background: lightblue;
}

.px-value {
  text-indent: 40px; /* Indents first line by 40px */
}

.negative-value {
  text-indent: -1em; /* Negative value outdents first line by 1em */
}

.percentage-value {
  text-indent: 10%; /* Indents first line by 10% of containing block's width */
}

With a positive 40px value, the first line of text is indented 40px from the left edge of the containing block. This indentation visually separates the first line from the block's border, creating a clear starting point.

The negative -1em value results in an outdent, moving the first line 1em to the left of the block's starting edge. This gives an effect of the first line 'hanging' out of the containing block.

Lastly, a 10% value indents the first line by a width equivalent to 10% of the containing block's width. This makes the indentation responsive, as it will adjust with changes in the width of the containing block.

The each-line and hanging values can also be used with text-indent, but they have highly limited browser support and may require enabling of experimental web platform features.

Values

The text-indent property accepts the following values:

Associated Properties

• text-align
• text-justify
• text-overflow
• text-transform
• text-decoration (with related properties from the CSS Text Decoration Module)
• hanging-punctuation

Tips and Tricks

• The text-indent property is inheritable, so when specified on a block-level element, it can affect inline-block children. To prevent this, specify text-indent: 0 on elements with display: inline-block.

• Proper use of text-indent can improve readability, especially in large blocks of text.

• Be aware that negative indent values can cause text to be outdented, potentially overlapping with other content.

• Many standardized style guides suggest the use of indentation to signify the start of a new paragraph or section, so text-indent can be particularly useful in these contexts.

Browser Compatibility

Most modern versions of Safari fully support the text-indent property. The partial support in other browsers refers to <length>, each-line, and hanging specifics. For more information, check out the first link in the Useful Resources below.

Caution: Early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: text-indent

Working Draft of CSS Text Module Level 3: text-indent