CSS text-indent

The CSS text-indent property is used to specify the indentation of the first line of text within a block-level element. It allows you to control the positioning of the first line, creating an indentation effect commonly used for paragraphs or block quotes.

The syntax for the text-indent property is as follows:

selector {
  text-indent: value;
}

• selector: Represents the HTML element or class to which the text-indent property will be applied.
• value: Specifies the indentation of the first line. It can be expressed in pixels (px), em units, percentages (%), or other length units.

Example:

p {
  text-indent: 20px;
}

In this example, the first line of all <p> elements will be indented by 20px.

The text-indent property is particularly useful for formatting paragraphs, quotations, or lists with hanging indents, where the first line starts at a different position than the subsequent lines. It can also be used to create custom indentation for other block-level elements.

Keep in mind that the text-indent property only affects the first line of the element. To apply indentation to subsequent lines or create more complex indentation patterns, you may need to use other CSS techniques or additional properties.

Additionally, be cautious when using text-indent on elements like headings (h1, h2, etc.) or list items (li), as these elements have semantic importance, and indenting their first lines may affect their meaning and readability.

As with any CSS property, consider the design requirements of your webpage and test different values to achieve the desired indentation effect for your text elements.