Introduction to CSS text-indent
In CSS the text-indent property can be used in each text block to determine the first-line indentation. It takes negative values, as well. It means that the first line is indented towards the left if the value is negative. Spacing is measured from the beginning edge of the container element at the block-level. The spacing and indenting should be accurate over the entire code. Most developers prefer to use the indentation in 4 or 2 spaces.
For HTML, every nested tag inside of its parent tag should be indented exactly once. Insert a break of the line after each block element. It’s not necessary to indent HTML code and avoid the indentation and additional spacing of all browsers and search engines. For every human reader, though, indenting your text is a good idea since it tends to make the code simpler to scan and read.
Syntax:
The syntax for CSS text-indent property can be defined as shown below:
text-indent: length|initial|inherit;- length: It is used for setting fixed indentation such as px, pt, cm, em, and so on. The default length value is 0.
- initial: This parameter is used to set the property to its default value.
- inherit: This parameter is used to inherit the property from its parent element.
For instance,
//these lines for length values
text-indent: 5mm;
text-indent: 30px;
//this is for percentage value
text-indent: 10%;How does CSS text-indent Property Work?
The text-indent is used in word processing to define the spacing or number of blank spaces used to distinguish a paragraph from the left or right margins. When indicated on a block element, the text-indent property is created which implies this will also affect descendant elements inline-block. Working with an indentation in the programming languages displays the data elements within the structure. Indentation makes it easier for the programs to read and comprehend. Programming languages such as Python make the indentation compulsory which enforces the readability of programs
Examples of CSS text-indent
Following are the examples are given below:
Example #1
Now, we will see CSS text indent property with examples as described below: Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS text-indent Example </title>
<style>
.mytext {
text-indent: 50px;
}
.mytext1 {
text-indent: -6em;
}
</style>
</head>
<body>
<h2> Text Indent - Length Value </h2>
<br>
<h3> text-indent: 50px </h3>
<div class = "mytext">
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries. Our unique step-by-step, online learning model along with amazing 2500+ courses prepared by top-notch professionals from the Industry help participants achieve their goals successfully.
</div>
<h3> text-indent: -10em </h3>
<div class = "mytext1">
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries. Our unique step-by-step, online learning model along with amazing 2500+ courses prepared by top-notch professionals from the Industry help participants achieve their goals successfully.
</div>
</body>
</html>Output:
Open the file in a browser and it will produce the following result:
In the above example, we have set text indent as 50px for the first paragraph which has moved 50px indentation from the beginning of the text. In the second paragraph, the text will have the first line indentedby -10em.
Example #2
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS text-indent Example </title>
<style>
.mytext {
text-indent: 20%;
}
.mytext1 {
text-indent: 40%;
}
</style>
</head>
<body>
<h2> Text Indent - Percentage Value </h2>
<br>
<h3> text-indent: 20% </h3>
<div class = "mytext">
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries. Our unique step-by-step, online learning model along with amazing 2500+ courses prepared by top-notch professionals from the Industry help participants achieve their goals successfully.
</div>
<h3> text-indent: 40% </h3>
<div class = "mytext1">
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries. Our unique step-by-step, online learning model along with amazing 2500+ courses prepared by top-notch professionals from the Industry help participants achieve their goals successfully.
</div>
</body>
</html>Output:
In the above example, we have set text-indent as 20% for the first paragraph which has moved 20 percentage indentation from the beginning of the text. In the second paragraph, the text will have an indentation of 40% from the beginning.
Example #3
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS text-indent Example </title>
<style>
.mytext {
text-indent: initial;
}
</style>
</head>
<body>
<h2> Text Indent - Initial Value </h2>
<br>
<div class = "mytext">
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries. Our unique step-by-step, online learning model along with amazing 2500+ courses prepared by top-notch professionals from the Industry help participants achieve their goals successfully.
</div>
</body>
</html>Output:
In the above example, we have used the ‘initial’ keyword that signifies the specified value identified as the initial value of the property. It defines the property to the default value.
Example #4
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS text-indent Example </title>
<style>
.mytext {
text-indent: -28px;
padding-left: 28px;
}
</style>
</head>
<body>
<h2> Hanging Text Indent </h2>
<br>
<div class = "mytext">
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries. Our unique step-by-step, online learning model along with amazing 2500+ courses prepared by top-notch professionals from the Industry help participants achieve their goals successfully.
</div>
</body>
</html>Output:
The hanging indent is where the paragraph’s first line juts out to the left, whereas the rest of the article is neatly indented. This is also used for things including bibliographies, where the author’s name starts at the leftmost top, but the rest of the paragraph is indented within.
Conclusion
So far, we have studied how CSS text-indent properties can be used to place the indentation for the block element. You can play with length values, percentage value, and initial properties in order to see better results. Therefore, the text indention helps to better connect the program structure to human readers.
Recommended Articles
This is a guide to CSS text-indent. Here we also discuss the definition and how does css text-indent property work along with different examples and its code implementation. You may also have a look at the following articles to learn more –
