Parsing of text-indent in css text attribute

The text attribute text-indent is used to set the indentation of the first line of text. Any element can have the first line indented by a given length, and the length can even be a negative number; But it only takes effect for fast elements!

p{text-align:2em;}

This rule indents the first line of any paragraph by 2 Character size.

Generally, text-indent can be applied to any block-level element, but not to inline elements, nor to replacement elements, such as , however, If there is an image on the first line of a paragraph, it will move with the text.

text-indent supports negative text indentation, such as

• p{text-indent:-2em; }

#The first line of all paragraphs here will be moved forward by 2 text sizes. However, when using negative text-indent, be careful that the text runs out of the element, so you may not get the effect you want.

What needs to be noted here is the use of percentage. Percent refers to the value relative to the parent element. If an indent value of 5% is set, then the first line of this element will be based on its parent element. Indent 5% of the width. Such as:

• p{width:400px;}

• ##p{text-indent :5%;}

##

This is a piece of text to test the use of text indentation percentage

< /p>

We can see that the first line of text is indented by 20px. The calculation principle is that the parent element 400x5% = 20px. Of course, it must be noted that the p element does not have a width set, but the width is set. Calculate it as a percentage of its own width.

However, the most interesting thing about text-indent is probably inheritance, which inherits calculated values ​​rather than declared values. Such as

• body{width:500px;}

##p{width:400px; text-indent:10%;}

• #p{width:200px;}

• <span style="font-size: 14px;"><p><br/>这是外面的文字<br/><p>这是里面的文字</p><br/></p></span>

  Here you can see that the first line of the two paragraphs of text is indented by 50px, instead of the outer text of 50px, and the text in the p element is indented by 40px. It can be seen that it inherits the calculated value, not the declared value.

Related recommendations:

How to use text-indent in CSS

The above is the detailed content of Parsing of text-indent in css text attribute. For more information, please follow other related articles on the PHP Chinese website!