About CSS Text-indent First line indent two characters and picture indent issues

The distance in front of the paragraph is two characters, and no more spaces are used. You should use the first line indent text-indent.

Text-indent can indent a unit in the first line of the container. For example, Chinese paragraphs usually have two characters in front of each paragraph.

<style type= "Text/css" >

p{

Text-indent:2em; /*em is a relative unit, 2EM is now twice times the size of a word */

}

</style>

Note: The div tag does not forget the start character. Text-indent is only valid for P or div tags and does not take effect on BR tags because the br tag is a newline label and not a segmented label.

Using CSS to achieve the first indentation of the paragraph two characters, the first line of indentation to achieve the general method is to add four small corner space.

The following indentation style is defined in the style:. Suojin{text-indent:2em}

Use class= "Suojin" where you need to indent, such as defining an entire block of paragraphs with a div to indent first,

Where in the Div area, when the browser meets the P statement (that is, the beginning of a new paragraph), it executes the. Suojin defined indentation.

You can also use an inline CSS style to define it in the body, for example (change angle brackets to small angle brackets when using):

<div style= "Text-indent:2em" > <p> paragraph One </p> <p> paragraph two </p> <p> paragraph three <p> </div>

You can add this indentation when you encounter a picture of a separate paragraph in the body content, the picture is indented, which can affect the layout. And the size of the image after indentation is not easy to grasp, especially for adaptive themes. So a lot of people end up using the first line indent of the paragraph because they can't figure out the picture.

In fact, Text-indent has a very strange property, that is, its internal elements encountered in the float or display:block will not inherit the external indentation of the property, that is, as long as the picture with a float or display:block CSS properties, The indentation of the image is automatically invalidated.

But in order to the effect of typesetting, generally use display:block, so that the picture will not be the same side with the text, the picture is a separate line.

About CSS Text-indent First line indent two characters and picture indent issues