Usage of text-indent in CSS-CSS Tutorial-php.cn

Usage of text-indent in CSS

王林

Release： 2024-02-20 09:02:35

Original

1410 people have browsed it

Usage of text-indent in CSS

The usage of text-indent in CSS requires specific code examples

CSS is a style sheet language used to define the style and layout of elements in HTML documents . Among them, text-indent is a property in CSS, used to set the indentation of the first line of the text block. This article will introduce the use of the text-indent attribute and provide some specific code examples.

1. Basic usage of text-indent attribute
The text-indent attribute is used to define the indentation of the first line of a text block and can be used for paragraphs, lists, titles and other elements. It is a non-negative integer value in pixels, percentages, or ems. A positive value indicates indentation to the right, a negative value indicates indentation to the left. The basic syntax is as follows:

selector {
  text-indent: value;
}

Copy after login

Among them, selector is the selector of the element to be styled, and value is the indented value of the first line.

2. First line indentation based on pixel units
To set the first line indentation in pixel units for a text block, you can directly specify a positive or negative value. For example, to set the indent of the first line of a paragraph to 30 pixels, you can use the following code:

p {
  text-indent: 30px;
}

Copy after login

In this way, the first line of all paragraph (

) elements will be indented 30 pixels to the right.

3. First line indentation based on percentage unit
The text-indent attribute also supports using percentage as the unit. In this case, the value of the first line indentation will be calculated relative to the width of the parent element. For example, to set the indentation of the first line of a paragraph to 50% of the width of the parent element, you can use the following code:

p {
  text-indent: 50%;
}

Copy after login

In this way, the first line of all paragraph (

) elements will be indented to the right 50% of the width of the parent element.

4. First line indent based on em unit
The text-indent attribute also supports using em as the unit. The em unit is a multiple of the element's font size. For example, to set the indentation of the first line of a paragraph to 2 times the font size, you can use the following code:

p {
  text-indent: 2em;
}

Copy after login

In this way, the first line of all paragraph (

) elements will be indented to the right 2x the font size.

5. The effect of indenting the first line of multiple paragraphs

<!DOCTYPE html>
<html>
<head>
<style>
p.indent {
  text-indent: 30px;
}
</style>
</head>
<body>

<h2>多段落首行缩进示例</h2>

<p class="indent">这是一个缩进的段落。</p>
<p class="indent">这是另一个缩进的段落。</p>
<p>这是一个没有缩进的段落。</p>

</body>
</html>

Copy after login

In the above code, define the class name .indent, and then apply the class to the paragraph element that requires the first line to be indented , which can achieve good first-line indentation of multiple paragraphs.

6. Summary
text-indent is a property in CSS used to set the indentation of the first line of a text block. It can be set in units such as pixels, percentages and ems. The above is the basic usage of the text-indent attribute and some specific code examples. I hope it will be helpful to you.

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