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:
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:
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:
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.
Advertisements