CSS Text-indent
Text-indent
The Text-indent property of CSS is used to set any first line’s indentation inside a text’s block. It describes the horizontal space amount that puts establish before the text line.
It also allows the negative values in CSS. When the negative values are specified, the first line’s indentation will be to the life side.
Syntax:
text-indent: length | inherit | initial;
Property Values
length: The length specified above is used to set the fixed indentation along with some units like px, em, pt, cm, and many others. It has a default value of 0. Also, it permits negative values. If its values are negative, then the first line’s indentation will be on the left side.
percentage: It describes the amount inside the space within the width percentage of any containing block.
initial: It can be used to set the attribute to its default attribute. This property value contains two other experimental attributes, which are explained below. The following two values are not supported inside the browsers.
hanging: This value is experimental and unofficial value. It inverts any indented line. Except for the first line, it can indent all the lines. The bibliographies are usually mentioned along with this value, in which any first line will be with a left-hand side margin, and other contents are indented.
each-line: These property values are also the experimental values. This value can influence all the lines and the first line afterward, the affected line break (with the use of <br>).
Example:
In the following example, we apply the CSS text-indent property along with some length values like cm, em, and px. Also, we are using the CSS text-align: justify; property to find the exceptional results.
<!DOCTYPE html>
<html>
<head>
<title> Text-indent Property </title>
<style>
div
{
font-size: 20px;
width: 500px;
height: 200px;
text-align: justify;
}
.exppx
{
text-indent: 100px;
}
.expem
{
text-indent: -5em;
}
expcm
{
text-indent: 7cm;
}
</style>
</head>
<body>
<center>
<h1> Text-indent CSS property Example </h1>
<h2> text-indent: 100px; </h2>
<div class= "exppx">
Hello, welcome to this page. This site is made so that a lot of students may study various technologies related to computer science easily. This site is always giving an in-depth and easy tutorial on multiple technologies. Everyone can't be perfect in this entire world, and everything can't be perfect. But we must try to be improved.
</div>
<h2> text-indent: -5em; </h2>
<div class= "expem">
Hello, welcome to this page. This site is made so that a lot of students may study various technologies related to computer science easily. This site is always giving an in-depth and easy tutorial on multiple technologies. Everyone can't be perfect in this entire world, and everything can't be perfect. But we must try to be improved.
</div>
<h2> text-indent: 7cm; </h2>
<div class= "expcm">
Hello, welcome to this page. This site is made so that a lot of students may study various technologies related to computer science easily. This site is always giving an in-depth and easy tutorial on multiple technologies. Everyone can't be perfect in this entire world, and everything can't be perfect. But we must try to be improved.
</div>
</center>
</body>
</html>
Output:
Example:
Let’s take another illustration with the use of some percentage values.
<!DOCTYPE html>
<html>
<head>
<title> Text-indent Property </title>
<style>
div
{
font-size: 20px;
width: 500px;
height: 200px;
text-align: justify;
}
.expper
{
text-indent: 60%;
}
</style>
</head>
<body>
<center>
<h1> Text-indent CSS property Example </h1>
<h2> text-indent: 60%; </h2>
<div class= "expper">
Hello, welcome to this page. This site is made so that a lot of students may study various technologies related to computer science easily. This site is always giving an in-depth and easy tutorial on multiple technologies. Everyone can't be perfect in this entire world, and everything can't be perfect. But we must try to be improved.
</div>
</center>
</body>
</html>
Output:
