How to indent text in HTML by using CSS ?
Last Updated :
30 Jan, 2024
In this article, we will discuss various methods to indent text in an HTML document. Text indentation is used to set the length of empty white space before lines of text in a block. It generally marks the beginning of a paragraph.
There are some common approaches for text indentation:
This property is used to add a margin to the left of an element. It can be used to add the required indent by specifying the space needed in suitable length units or percentages.
Example: This example uses the margin-left property to indent the whole block of text.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin-left: 40px;
}
</style>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>
We provide a variety of services
for you to learn, thrive and also
have fun! Free Tutorials, Millions
of Articles, Live, Online and
Classroom Courses ,Frequent Coding
Competitions ,Webinars by Industry
Experts, Internship opportunities
and Job Opportunities.
</p>
</body>
</html>
|
Output:
This property is used to set the amount of space before the first line of text in a paragraph. It can be specified in length units or a percentage as required.Â
Example: In this example, the first line of the paragraph is indented using the text-indent property.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-indent: 40px;
}
</style>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>
We provide a variety of services
for you to learn, thrive and also
have fun! Free Tutorials, Millions
of Articles, Live, Online and
Classroom Courses ,Frequent Coding
Competitions ,Webinars by Industry
Experts, Internship opportunities
and Job Opportunities.
</p>
</body>
</html>
|
Output:
The padding-left property in CSS specifies the amount of space between the left edge of an element’s content box and its inner content. It creates padding on the left side, pushing the content away from the element’s left boundary, and providing spacing and indentation.
Example: In this example, we are using the padding left property with an example .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
padding-left: 60px;
}
</style>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>
We provide a variety of services
for you to learn, thrive and also
have fun! Free Tutorials, Millions
of Articles, Live, Online and
Classroom Courses ,Frequent Coding
Competitions ,Webinars by Industry
Experts, Internship opportunities
and Job Opportunities.
</p>
</body>
</html>
|
Output:
.png)
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...