“CSS indent is the property of CSS used in the div block or any container to show the indentation of the first line of the text. When CSS indent is not mentioned with any line, then by default, it is for the first line of the text. It takes the values with positive and negative signs too.

This indent property can be applied to any HTML content, but in this article, we have used text to indent the text in the first line of the paragraph.”

Working on CSS Indent Text Property

It is used to show the number of blank spaces that discriminate between the paragraphs starting from the left or the right margins of the outer content that is mostly div. The indentation property of CSS makes the text easy for the programs to be read and understandable by keeping the text at a specified length. This makes a catchy effect for the text for the user.

The basic syntax used for the text-indent property is:

Example 1

In this example, we will create a web page using only HTML text content in the form of headings or paragraphs. So first, inside the body section, use the heading <h2> tag to introduce a heading. After a break <br>, again, a heading is used. The break tag creates a blank line and jumps to the next line to create new content. After declaring the headings, a div is created. A div is an important HTML container as it is a container that keeps the HTML content in the specified place. Whatever elements we use inside the div are required with a specific size to keep all the elements in that size respectively. In this case, we have mentioned the name of the class, which will be declared in the head section of the HTML code. All CSS style properties are written inside the mentioned class that will be applied to the div and the content inside it.

Inside the div, we will simply use the text. Simple text content can be used with or without the paragraph tags.

After the div tag is closed, a heading name is again used in <h3>. A div will be declared again with the new class name that will contain the CSS for this class separately. Close all the tags and HTML body as well. Now consider the CSS tags declared in the head portion, making it an internal CSS. In the CSS, two classes are declared separately; the first class contains a text indent of 50px with a div width of 650px length, this will keep the text in this length of the div, and the first line of the text will be affected by this value of indent.

Similarly, for the second class declared for the second div, a text-indent applied to the text is in negative value. A similar width length is applied to the div too.

Now save the code with the html extension to make it open both as an html code in the editor and as a webpage in the browser.

You will see that the first div having the text-indent of 50px has the first line of the text that has moved 50px indention from the left beginning point. Whereas the second div has 10em, the text will move towards the left side indented by the specified value, making the words of the first line get hidden.

Example 2

The unit used for indent is not always in pixels; it can also be used in percentages. In this example, the html body code is almost the same; just the heading name is different as they specify the new values in percentage. The same two classes for the CSS will be used in the code as well.

Moving towards the CSS head portion, the style tag has the class to contain an indent of 20 percent value and width, as we have given in the first example.

Similarly, second class mytext1 is declared to apply a style to the second div, this will have the same width, but the indent for the text is 40%. This increase in text-indent will cause the first line of the text to move in the right direction with a change.

You can see that when we execute the html file on the browser, a web page will be formed having two text paragraphs. The first one starts close to the left, whereas the second paragraph starts from the center of the div.

Example 3

The third and the last example is about the hanging text-indent. In this example, the first sentence is moved in a backward direction, whereas the rest of the paragraph is still in its position; the displacement is mostly in a negative value in this case, to move the first text section in a left direction. Considering the HTML body, there is a single heading and a div containing the text. The div container has a class to style the text inside it by using internal CSS.

Inside the style tag in the HTML head, the class declared in the div tag is declared with specifications. It has a text-indent of -28px. This means that the first line will start with an indentation of a negative 28th value, moving the text to the left side. As the negative text-indent value makes the text move towards the negative side, we have explained it in the first example, but unlike that example, where the moving part of the first line was not visible, here, the whole first sentence appeared inside the div.

Unlike the text-indent, as it is taken in a negative value, the value of padding-left is taken in positive because the whole paragraph will fit inside this div size; this will make the text of the first line more prominent towards the left direction.

The rest of the HTML body code is the same, having a heading and a div with a class.

After saving the code, execute it on the browser. You will see that the first row of the text is towards the left direction, and the rest of the paragraph from the second line is towards the right.

Conclusion

The article explains the working and usage of indent CSS property of text in web pages. Whenever we are willing to describe anything through a text on the website, whether it is about the website or any other information, we use this indent property to displace the first line text in a bit right or left direction. In this article, we have used different examples that explain the working of this indent property in the text property of a web page, formed by using HTML and CSS together.