Menu
CSS

text-indent

The text-indent property in CSS helps you control the indentation of the first line of a paragraph. This is useful for creating a polished and readable layout. 

Here’s a breakdown of how to use it :

 

1. Setting a Basic Indent

  • Description: Indents the first line of a paragraph by a specified amount.
  • Use Case: To give your paragraphs a classic, book-like appearance.
p {
    text-indent: 50px;
}

 

2. Indenting with Percentages

  • Description: Indents the first line by a percentage of the containing element's width.
  • Use Case: For responsive designs where the indent adjusts with the size of the container.
p {
    text-indent: 10%;
}

 

3. Negative Indent

  • Description: Creates a hanging indent by moving the first line to the left.
  • Use Case: Useful for special text layouts, such as bibliographies or block quotes.
p {
    text-indent: -20px;
}

 

4. No Indent

  • Description: Ensures there is no indentation on the first line.
  • Use Case: To reset or remove any default indentation.
p {
    text-indent: 0;
}

 

Examples on codersmile.com

Here’s how these styles look in action:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Indent Example on codersmile.com</title>
    <style>
        .basic-indent {
            text-indent: 50px;
        }
        .percentage-indent {
            text-indent: 10%;
        }
        .negative-indent {
            text-indent: -20px;
        }
        .no-indent {
            text-indent: 0;
        }
    </style>
</head>
<body>
    <p class="basic-indent">This paragraph has a basic indent of 50 pixels.</p>
    <p class="percentage-indent">This paragraph has an indent of 10% of the container's width.</p>
    <p class="negative-indent">This paragraph has a negative indent, creating a hanging indent effect.</p>
    <p class="no-indent">This paragraph has no indent.</p>
</body>
</html>

 

CSS