🎯 What is text-indent?

The text-indent property is used to define the amount of space (indentation) at the beginning of the first line in a block of text.

In other words, it moves only the first line of a paragraph inward while keeping the rest of the lines aligned normally.

It is often used in books, articles, or blogs to create a clean and professional paragraph structure.

p {
    text-indent: 40px;
}
                

➡️ In this example, the first line of the paragraph starts 40px inward.

Defines indentation using fixed units like px, em, or rem.

p {
    text-indent: 2em;
}
                

➡️ The first line is indented based on the font size (2 × font size).

Sets indentation relative to the element’s width.

p {
    text-indent: 10%;
}
                

Resets indentation to default value (0).

p {
    text-indent: initial;
}
                

The element inherits the text-indent value from its parent.

div {
    text-indent: 30px;
}

p {
    text-indent: inherit;
}
                

➡️ The <p> element inherits the indentation from the parent element.