The text-indent property is a CSS property that is used to specify the indentation of the first line of a block-level element. It is commonly used to create a visual hierarchy in text content by indenting the first line of a paragraph or list item.
The text-indent property can be applied to any block-level element, including paragraphs, list items, and headings. It is a shorthand property that combines the text-indentation value with other text-related properties such as text-align, text-transform, and line-height.
The text-indent property takes a length value as its argument, which specifies the amount of indentation to apply to the first line of the element. The value can be specified in pixels, ems, or percentages. A positive value will indent the first line to the right, while a negative value will indent it to the left.
Here are some examples of how to use the text-indent property:
<p style="text-indent: 2em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
<ul style="text-indent: -1em;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2 style="text-indent: 20%;">Heading 2</h2>
In the first example, the <p> element has a text-indent value of 2em, which will indent the first line of the paragraph by 2 times the font-size of the element. In the second example, the <ul> element has a text-indent value of -1em, which will indent the list items to the left by 1 times the font-size of the element. In the third example, the <h2> element has a text-indent value of 20%, which will indent the first line of the heading by 20% of the width of the containing element.
The text-indent property can also be used in combination with other text-related properties to create more complex text layouts. For example, it can be used with the text-align property to create a hanging indent, where the first line is indented to the left and the subsequent lines are aligned to the right:
<p style="text-indent: -2em; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
In this example, the <p> element has a text-indent value of -2em, which will indent the first line to the left by 2 times the font-size of the element. The text-align property is set to justify, which will align the subsequent lines to the right.
The text-indent property is a useful tool for creating visually appealing text layouts in web pages. By using it in combination with other text-related properties, designers can create a wide range of text styles and layouts that enhance the readability and usability of their content.