CSS Text-indent

CSS text-indent Property – Indent the First Line of Text

The text-indent property in CSS is used to specify the indentation of the first line of text in a block-level element. This property is typically used to create a visual separation between paragraphs or sections of text.

Syntax

element {
    text-indent: length | percentage | initial | inherit;
}

Property Values

  • length: Specifies a fixed indentation. You can use units like px, em, rem, etc.
  • percentage: Specifies the indentation as a percentage of the containing block’s width.
  • initial: Sets the property to its default value, which is 0.
  • inherit: Inherits the text-indent value from the parent element.

Examples

Example 1: Indenting the First Line of a Paragraph

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            text-indent: 30px;
        }
    </style>
</head>
<body>
    <p>This is a paragraph with the first line indented by 30 pixels. Subsequent lines of the paragraph will not be indented.</p>
</body>
</html>

Try It Now

In this example, the first line of the paragraph is indented by 30 pixels.

Example 2: Indenting with a Percentage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            text-indent: 10%;
        }
    </style>
</head>
<body>
    <p>This paragraph's first line is indented by 10% of the width of the containing block.</p>
</body>
</html>

Try It Now

The first line of the paragraph is indented by 10% of the width of its container.

Example 3: Negative Indentation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            text-indent: -20px;
        }
    </style>
</head>
<body>
    <p>This paragraph has a negative text-indent, which pulls the first line out of the normal text flow.</p>
</body>
</html>

Try It Now

A negative value for text-indent will pull the first line of text out towards the left margin, creating a hanging indent effect.

Use Cases

  • Indenting paragraphs: To visually separate paragraphs in a block of text.
  • Hanging indents: Often used in lists or citations where the first line is outdented (negative indent) and subsequent lines are indented.

Tips

  • Use text-indent to improve readability by adding a subtle visual cue for new paragraphs.
  • Combine with other text styling properties to create polished and professional layouts.
  • Avoid over-indenting as it can make the text hard to read or appear cramped.

The text-indent property is a simple but effective tool for enhancing the visual structure of text on a webpage, helping to create a clear and aesthetically pleasing presentation.