The text-indent CSS property is used to specify the indentation of the first line of text within a block-level element. It allows you to control the horizontal positioning of the first line, creating an indentation effect.
The text-indent property accepts various values:
- A length value, such as
pxorem, specifies a fixed measurement for the indentation. Positive values move the first line to the right, while negative values move it to the left. - A percentage value, such as
%, is relative to the width of the containing block. Positive values move the first line to the right, while negative values move it to the left. - The
inheritkeyword, which specifies that the value should be inherited from the parent element.
Here’s an example:
.indented-text {
text-indent: 2em;
}
In this example, the .indented-text class sets the text-indent property to 2em, causing the first line of text within the element to be indented by 2 times the size of the current font.
It’s important to note that the text-indent property only affects the first line of the element’s content. Subsequent lines will not be affected unless you use additional CSS techniques or properties to control the indentation for multiple lines.
The text-indent property is commonly used for creating hanging indents in paragraphs, where the first line is indented but subsequent lines are aligned to the left margin. It can also be used to create other indentation effects for different text elements as needed.
Keep in mind that text-indent may have unintended consequences for certain elements like headings or list items, where it may conflict with the default styling or structure. It’s important to use it judiciously and consider the impact on readability and design when applying indentation to different elements.