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

Home

Web Front-end

CSS Tutorial

Usage of text-indent in CSS

王林

Feb 20, 2024 am 09:02 AM

css

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;
}

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;
}

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%;
}

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;
}

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 id="多段落首行缩进示例">多段落首行缩进示例</h2>

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

</body>
</html>

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Two Images and an API: Everything We Need for Recoloring ProductsApr 15, 2025 am 11:27 AM

I recently found a solution to dynamically update the color of any product image. So with just one of a product, we can colorize it in different ways to show

Weekly Platform News: Impact of Third-Party Code, Passive Mixed Content, Countries with the Slowest ConnectionsApr 15, 2025 am 11:19 AM

In this week's roundup, Lighthouse sheds light on third-party scripts, insecure resources will get blocked on secure sites, and many country connection speeds

Options for Hosting Your Own Non-JavaScript-Based AnalyticsApr 15, 2025 am 11:09 AM

There are loads of analytics platforms to help you track visitor and usage data on your sites. Perhaps most notably Google Analytics, which is widely used

It's All In the Head: Managing the Document Head of a React Powered Site With React HelmetApr 15, 2025 am 11:01 AM

The document head might not be the most glamorous part of a website, but what goes into it is arguably just as important to the success of your website as its

What is super() in JavaScript?Apr 15, 2025 am 10:59 AM

What's happening when you see some JavaScript that calls super()?.In a child class, you use super() to call its parent’s constructor and super. to access its

Comparing the Different Types of Native JavaScript PopupsApr 15, 2025 am 10:48 AM

JavaScript has a variety of built-in popup APIs that display special UI for user interaction. Famously:

Why Are Accessible Websites so Hard to Build?Apr 15, 2025 am 10:45 AM

I was chatting with some front-end folks the other day about why so many companies struggle at making accessible websites. Why are accessible websites so hard