totn CSS

CSS: text-indent property

This CSS tutorial explains how to use the CSS property called text-indent with syntax and examples.

Description

The CSS text-indent property defines the amount of indentation before the first line of an element's text.

Syntax

The syntax for the text-indent CSS property is:

text-indent: value;

Parameters or Arguments

value

The amount of horizontal space (ie: indentation) before the first line of the element's text. It can be one of the following:

Value Description
fixed Fixed value expressed in pixels, em's, etc.
p { text-indent: 40px; }
p { text-indent: 3em; }
percentage Percentage value
p { text-indent: 10%; }

Note

  • The text-indent property allows you to define the amount of horizontal spacing (ie: left to right) that will appear in front of the first line of an element's text.
  • When the value is provided as a percentage, it is relative to the width of the containing block.

Browser Compatibility

The CSS text-indent property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer (IE)
  • Opera
  • Safari (WebKit)

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:

<div>
  <p>TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003.</p>
  <p>CheckYourMath.com has answers to your every day Math questions.</p>
</div>

The result would look like this:

CSS

In this CSS text-indent example, we have set the text-indent to 25px for the <p> 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:

CSS

In this CSS text-indent example, we have set the <p> 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:

<div>
  <p>TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003.</p>
  <p>CheckYourMath.com has answers to your every day Math questions.</p>
</div>

The result would look like this:

CSS

In this CSS text-indent example, we have set the text-indent of the <p> 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.