cyberangles blog

Mastering the CSS text-indent Property: A Comprehensive Guide

In the world of web design, creating visually appealing and well-structured text is crucial. One of the CSS properties that can help you achieve this is the text-indent property. This property allows you to indent the first line of a block of text, giving your content a more organized and professional look. In this blog post, we'll explore the text-indent property in detail, including its syntax, common practices, best practices, and example usage.

2026-06

Table of Contents#

Syntax#

The text-indent property is used to indent the first line of a block of text. The syntax for the text-indent property is as follows:

selector {
  text-indent: length|percentage|initial|inherit;
}
  • length: Specifies the indentation as a fixed length. For example, text-indent: 20px; will indent the first line by 20 pixels.
  • percentage: Specifies the indentation as a percentage of the width of the containing block. For example, text-indent: 10%; will indent the first line by 10% of the width of the containing block.
  • initial: Sets the property to its default value.
  • inherit: Inherits the property from its parent element.

Common Practices#

  • Indentation for paragraphs: The text-indent property is commonly used to indent the first line of paragraphs. This gives the text a more organized and professional look.
  • Indentation for lists: The text-indent property can also be used to indent the first line of list items. This can be useful for creating nested lists or for giving the list a more structured appearance.
  • Indentation for blockquotes: The text-indent property is often used to indent blockquotes. This helps to distinguish the blockquote from the rest of the text and gives it a more prominent appearance.

Best Practices#

  • Use relative units: When using the text-indent property, it's best to use relative units such as percentages or ems. This ensures that the indentation is proportional to the size of the text and the width of the containing block.
  • Avoid excessive indentation: While indentation can be useful for creating a more organized appearance, excessive indentation can make the text difficult to read. It's best to use a moderate amount of indentation, such as 1-2 ems.
  • Test in different browsers: The text-indent property may behave differently in different browsers. It's important to test your code in multiple browsers to ensure that the indentation appears as expected.

Example Usage#

Here are some examples of how to use the text-indent property:

Indentation for paragraphs#

p {
  text-indent: 2em;
}

This code will indent the first line of all paragraphs by 2 ems.

Indentation for lists#

ul {
  text-indent: 1em;
}

This code will indent the first line of all unordered lists by 1 em.

Indentation for blockquotes#

blockquote {
  text-indent: 2em;
}

This code will indent the first line of all blockquotes by 2 ems.

Reference#

By following these best practices and using the text-indent property effectively, you can create more visually appealing and well-structured text on your website. Remember to test your code in multiple browsers and use relative units to ensure that the indentation appears as expected.