html text property,CSS: text-indent property

Example

We will discuss the text-indent property below, exploring examples of how to use this property in CSS.

Using Fixed Value

Let's look at a CSS text-indent example where we have provided the text-indent as a fixed value expressed in pixels.

The CSS would look like this:

div { background: lightyellow; padding: 10px; }

p { text-indent: 25px; }

The HTML would look like this:

TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003.

CheckYourMath.com has answers to your every day Math questions.

The result would look like this:

In this CSS text-indent example, we have set the text-indent to 25px for the

tag. This will indent the first line of text for each paragraph by 25px.

We can also express the text-indent as a fixed value in em's. So using the same HTML, we could modify our CSS as follows:

div { background: lightyellow; padding: 10px; }

p { text-indent: 5em; }

The result would now look like this:

In this CSS text-indent example, we have set the

tag to a text-indent of 5em, which appears as a slightly larger indent than 25px. The text-indent applies to the first line of text for each of the paragraphs.

Using Percentage

Let's look at a CSS text-indent example where we have provided the text-indent as a percentage.

The CSS would look like this:

div { background: lightyellow; padding: 10px; }

p { text-indent: 5%; }

The HTML would look like this:

TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003.

CheckYourMath.com has answers to your every day Math questions.

The result would look like this:

In this CSS text-indent example, we have set the text-indent of the

tag to 5%, which means that the text-indent would be 5% of the width of the container for the first text line of each of the paragraphs.