How to indent text in CSS?

#CSS text properties define the appearance of text.

Indent text

Indent the first line of a paragraph on a Web page. This is one of the most commonly used text formatting effects. (Recommended learning: CSS Getting Started Tutorial)

CSS provides the text-indent attribute, which can easily implement text indentation.

By using the text-indent attribute, the first line of all elements can be indented by a given length, even a negative value.

The most common use of this attribute is to indent the first line of a paragraph. The following rules will indent the first line of all paragraphs by 5 em:

p {text-indent: 5em;}

Note: Generally Say, text-indent can be applied to all block-level elements, but the attribute cannot be applied to inline elements, nor can it be applied to replacement elements such as images. However, if a block-level element (such as a paragraph) has an image in the first line, it will move with the rest of the text in that line.

Tip: If you want to "indent" the first line of an inline element, you can use left padding or margin to create this effect.

Use negative values

text-indent can also be set to negative values. Using this technique, you can achieve many interesting effects, such as "hanging indent", where the first line hangs to the left of the rest of the element:

p {text-indent: -5em;}

But when setting a negative value for text-indent, you need to Be careful, if you set a negative value for a paragraph, some of the text in the first line may extend beyond the left edge of the browser window. In order to avoid this display problem, it is recommended to set an additional margin or some padding for negative indentation:

p {text-indent: -5em; padding-left: 5em;}

Use a percentage value

text-indent OK Use all length units, including percentage values.

The percentage is relative to the width of the indented element's parent element. In other words, if you set the indent value to 20%, the first line of the affected element will be indented by 20% of the width of its parent element.

In the following example, the indent value is 20% of the parent element, which is 100 pixels:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>

Inherited

text-indent attribute can be inherited, please consider the following markup:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>

The paragraph in the above markup will also be indented by 50 pixels. This is because this paragraph inherits the div with the id of inner The indent value of the element.

The above is the detailed content of How to indent text in CSS?. For more information, please follow other related articles on the PHP Chinese website!