Indent the first line of CSS

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 news-www.phpq.net </title>
<Style
Type = "text/CSS">
P {text-indent: 2em;
/* Em is the relative unit. 2em is twice the current 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.

Link uses an image as the background, text-indent:-9999px; 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 dotted box n long.

Because we usually use the overflow: hidden; attribute, we have never noticed this problem. However, we strongly recommend that you do not use Js for interaction.
Overflow: hidden; attribute, because it will bring you a lot of unexpected troubles.

The dotted box is actually the outline attribute in CSS, which also indicates that IE and Firefox have
The resolution range is different: ie considers the dotted box as the edge of border, while Firefox considers the dotted box as the 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.