CSS indent the first line of a paragraph

Source: Internet
Author: User

The distance between two characters in front of a paragraph. Do not use spaces. Use the first line to indent text-indent.

Text-indent can indent the first line of the container in a certain unit. For example, a Chinese section generally contains two Chinese characters at the beginning of each section.

Here we need to know a length unit em. Em is the unit of relative length. The font size relative to the text in the current object.

We generally have two Chinese characters in front of each section. In fact, 2em is indented in the first line.

See the following example:

 

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> PHP info-http://www.phpq.net % 3C/title>
<Style type = "text/CSS">
P {text-indent: 2em;/* em is the relative unit. 2em is twice the size of a word */}
</Style>
</Head>
<Body>
<P> there is no space before a paragraph. Use the first line to indent text-indent. Length unit em. The font size relative to the text in the current object. We indented 2em in the first line. 2em is twice the size of a word. I learned a lot of new knowledge on the web teaching network. </P>
</Body>
</Html>

 

The text-indent attribute hides text.

The link uses an image as the background, text-indent:-9999px; To hide the text, this effect is normal in IE, but in Firefox, When you click the link, the dotted box will wrap the indented text, and the result is displayed as the dotted box n length.

Because we usually use the overflow: hidden; attribute, we have never noticed this problem. However, when you need to use js to implement some interaction, we strongly recommend that you do not use overflow: hidden; attribute, because it will bring you a lot of unexpected troubles.

The dotted box is actually the outline attribute in CSS. This also shows that the parsing range of the outline and border in IE and Firefox is inconsistent: IE thinks that the dotted box is the edge of border, firefox believes that the dotted box should be a text range.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.