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
How to set indent the second line of paragraph using CSS?
The CSS text-indent property is typically used to indent the first line of a paragraph. However, to create a hanging indent effect where the second and subsequent lines are indented instead of the first line, you need to combine negative text-indent with positive padding-left.
Syntax
selector {
text-indent: negative-value;
padding-left: positive-value;
}
How It Works
To indent the second line of a paragraph, we use a two-step approach
- Negative text-indent: Moves the first line to the left
- Positive padding-left: Moves the entire paragraph (including subsequent lines) to the right
The result is that the first line appears at the normal position, while the second and subsequent lines are indented.
Example 1: Basic Second Line Indentation
The following example demonstrates how to indent the second line by 30px
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-align: center;
color: #333;
}
.hanging-indent {
text-indent: -30px;
padding-left: 30px;
line-height: 1.6;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h2>Second Line Indentation Example</h2>
<p class="hanging-indent">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>
The paragraph displays with the first line starting at the left margin, while the second and subsequent lines are indented 30px to the right, creating a hanging indent effect.
Example 2: Using Em Units for Responsive Indentation
Using em units creates responsive indentation that scales with font size
<!DOCTYPE html>
<html>
<head>
<style>
.bibliography {
text-indent: -2em;
padding-left: 2em;
margin-bottom: 15px;
font-family: Arial, sans-serif;
}
.large-text {
font-size: 18px;
}
</style>
</head>
<body>
<h2>Bibliography Style Indentation</h2>
<p class="bibliography">Smith, J. (2023). Advanced CSS Techniques for Modern Web Design. Web Publishing House.</p>
<p class="bibliography large-text">Johnson, M. (2023). Responsive Typography in CSS. Digital Press.</p>
</body>
</html>
Two bibliography entries are displayed with hanging indents. The second entry has larger text, but the indentation proportionally adjusts due to the em units.
Common Use Cases
Second line indentation is commonly used for
- Bibliography entries: Academic citations and references
- Poetry: Continuing lines of verse
- Lists: Custom bullet points or numbering
- Addresses: Multi-line contact information
Conclusion
Creating second line indentation in CSS requires combining negative text-indent with positive padding-left. This hanging indent effect is useful for bibliographies, poetry, and other formatted text where subsequent lines need to be visually separated from the first line.
3K+ Views
