CSS text-indent
This CSS text-indent property sets the indentation of the first line in a block of text. It specifies the amount of horizontal space that puts before the lines of content.
Values:
- length
- percentage
- initial
- hanging
- each-line
Example:
The length values in px, em, and cm.
<!DOCTYPE html> <html> <head> <title> CSS text-indent Property </title> <style> div{ font-size: 20px; width: 500px; height:200px; text-align: justify; } .px { text-indent: 100px; } .em { text-indent: -5em; } .cm { text-indent: 7cm; } </style> </head> <body> <center> <h1>Example of text-indent Property</h1> <h2>text-indent: 70px;</h2> <div class = "px"> Enter content here...........................//////////////////,,,,,,,,,, </div> <h2>text-indent: -5em;</h2> <div class = "em"> Enter content here...........................//////////////////,,,,,,,,,, </div> <h2>text-indent: 7cm;</h2> <div class = "cm"> Enter content here...........................//////////////////,,,,,,,,,, </div> </center> </body> </html>
OUTPUT:
Demonstration using the percentage values:
Example:
<!DOCTYPE html> <html> <head> <title> CSS text-indent Property </title> <style> div{ font-size: 20px; width: 500px; height:200px; text-align: justify; } .per { text-indent: 65%; } </style> </head> <body> <center> <h1>Example of text-indent Property</h1> <h2>text-indent: 65%;</h2> <div class = "per"> Welcome to the I2TUTORIALS enter content hera......... </div> </center> </body> </html>
OUPTUT: