Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Indent the first line of a paragraph in CSS
Use the text-indent property to indent the first line of a paragraph. This property accepts values in pixels (px), centimeters (cm), percentages (%), or em units.
Syntax
text-indent: value;
Parameters
The text-indent property accepts the following values:
- Length values: px, em, cm, mm, in, pt, pc
- Percentage: Relative to the width of the containing block
- Keywords: inherit, initial, unset
Example: Basic Text Indentation
You can try to run the following code to indent the first line:
<html>
<head>
<style>
.indent-example {
text-indent: 2cm;
width: 400px;
font-family: Arial, sans-serif;
line-height: 1.5;
}
</style>
</head>
<body>
<p class="indent-example">
This text will have first line indented by 2cm and this line will remain at
its actual position. This is done by CSS text-indent property which only
affects the first line of each paragraph.
</p>
</body>
</html>
Different Indentation Values
<html>
<head>
<style>
.indent-px { text-indent: 50px; }
.indent-em { text-indent: 2em; }
.indent-percent { text-indent: 10%; }
.paragraph-style {
width: 350px;
margin: 10px 0;
font-family: Georgia, serif;
}
</style>
</head>
<body>
<p class="paragraph-style indent-px">
This paragraph uses 50px indentation. Notice how only the first line is indented.
</p>
<p class="paragraph-style indent-em">
This paragraph uses 2em indentation, which scales with font size.
</p>
<p class="paragraph-style indent-percent">
This paragraph uses 10% indentation relative to container width.
</p>
</body>
</html>
Key Points
- Only the first line of each paragraph is indented
- Negative values create hanging indents (outdents)
- Percentage values are relative to the parent container's width
- The property applies to block-level elements like
<p>,<div>
Conclusion
The text-indent property provides an easy way to create professional paragraph formatting. Use consistent indentation values throughout your document for better readability.
Updated on: 2026-03-15T23:18:59+05:30
4K+ Views
Advertisements