Indent Text with CSS text-indent Property

CSS | text-indent Property: Learn, how to indent the text on a webpage?
Submitted by Apurva Mathur, on June 25, 2022

What is indentation or indent text?

When we write any text, the increase or decrease of space between the left margins of a paragraph refers to the indentation. We simply called them white spaces. Students who know python must be very much aware of this term, but those who don’t know python unknowingly must be also using this indent text since childhood. When we write any content in a word file, sometimes we observe that the synchronization is disturbed between the lines to manage that we use TAB on the keyboard. This TAB creates an indentation between the texts. Now, the question arises of how we can apply this indentation in CSS?

CSS comes up with unique property named text-indent. Wherever we want to indentation you just need to specify the element name and the value (value here means how much indentation you want), and CSS will provide white spaces up to that value.

Syntax:

element_name/selector {text-indent:value;}

Example to set text indent using CSS text-indent property

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
         text-indent: 10%;
         font-size: 17px;
         color: royalblue;
         font-family: "Calibri Light";
         font-weight: bold;
         }
         p{
         font-size: 25px;
         color: deeppink;
         font-family: "Calibri Light";
         font-weight: bold;
         }
      </style>
   </head>
   <body style="background-color: floralwhite">
      <h3>This text written below is with text-indentation</h3>
      <div>Happiness Comes from Within As we now know that we can not buy happiness with money and there is no other shortcut to happiness. It is something that you feel from within.</div>
      <h3>This text written below is without text-indentation</h3>
      <p>Happiness is basically a state of mind</p>
   </body>
</html>

Output:

Example: Indent Text with CSS

Explanation:

In the above code, the text-indent property is applied to the text written inside the div tag, you can see the difference between the indented text and a non-indented text. You can also provide negative values to this property; as a result, the negative value will shift the text to the left-most corner of the screen.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT




Comments and Discussions!




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.