Classic Case
  • Website of Tongren Development and Reform Commission
  • Tongren City Science and Technology Innovation Service Platform
  • Tongren Science and Technology Bureau

Automatically blank 2 spaces before each paragraph of CSS-text-indent property indent text

Posted: 2015-05-18 00:31 Source: unknown Author: admin Click: Times

I saw a template before. Each paragraph of text was automatically blanked by 2 spaces. When you open the source code, there is no space or something. Let's look at the specifics:

Indent text

Indent the first line of a paragraph on a Web page. This is one of the most commonly used text formatting effects.

CSS provides text-indent attribute, which can be easily implemented text indent.

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

The most common use of this property is to indent the first line of a paragraph. The following rule indents the first line of all paragraphs by 5 em:

 p {text-indent: 5em;} 

一般来说,可以为所有块级元素应用text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用text-indent 属性。 Note: In general, text-indent can be applied to all block-level elements, but this attribute cannot be applied to inline elements, and text-indent attributes cannot be applied to replacement elements such as images. However, if there is an image in the first line of a block-level element (such as a paragraph), it moves with the rest of the text in that line.

如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。 Tip: If you want to "indent" the first line of an inline element, you can create this effect with a left or right margin.

Use negative values

text-indent can also be set to a negative value. With this technique, you can achieve a lot of interesting effects, such as "hanging indent", that is, the first line is suspended to the left of the rest of the element:

 p {text-indent: -5em;} 

But be careful when setting negative values for text-indent, if you set a negative value for a paragraph, some text in the first line may exceed the left border of the browser window. To avoid this display problem, it is recommended to set an extra margin or some inner margins for negative indentation:

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

Use percentage value

text-indent can use all length units, including percentage values.

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

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

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


The text-indent attribute can be inherited, consider the following tags:

 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 is also indented by 50 pixels, because this paragraph inherits the indentation value of the div element with id inner.

Horizontal alignment

text-align is a basic property that affects the alignment of text lines within an element. Its first three values are fairly straightforward, but the fourth and fifth are slightly more complicated.

The values left, right, and center cause the text in the element to be left-aligned, right-aligned, and centered, respectively.

Western languages read from left to right, and the default value for all text-align is left. The text is aligned on the left border and the right border is jagged (called "left to right" text). For languages such as Hebrew and Arabic, text-align defaults to right because these languages read from right to left. Unsurprisingly, center centers each line of text in the element.

将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现。 Tip: To center block-level or table elements, set the left and right margins on these elements appropriately.

text-align: center and <CENTER>

You might think that text-align: center does the same thing as the <CENTER> element, but in reality they are very different.

<CENTER> not only affects the text, it also centers the entire element. text-align does not control the alignment of the elements, it only affects the internal content. The element itself does not move from one paragraph to the other, only the text within it is affected.


The last horizontal alignment property is justify.

In justified text, the left and right ends of a line of text are placed on the inner border of the parent element. Then, adjust the space between words and letters so that the lines are exactly the same length. You may have noticed that justified text is common in printing.

Note that it is up to the user agent (not CSS) to determine how the justified text stretches to fill the space between the left and right borders of the parent element. For more information, see the CSS text-align property reference.

If you are interested, you can check the CSS manual, I believe it will be more thorough.

------ Divider ----------------------------
------ Divider ----------------------------