CSS text-indent Property

February 10, 2021 12:37 pm IST

You are Here:

CSS text-indent Property

CSS text-indent property sets the length of empty space (indentation) that is put before lines of text in a block.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> p{ text-indent: 50px; } </style> </head> <body> <h1>CSS text-indent Property</h1> <p>Joanne Rowling was born on 31st July 1965 at Yate General Hospital just outside Bristol, and grew up in Gloucestershire in England and in Chepstow, Gwent, in south-east Wales.</p> </body> </html>

Run

Syntax

Using CSS

element{ text-indent: 50px; }

Using Javascript

object.style.textIndent="50px";

Animatable

Yes, text-indent property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS text-indent property is 0.

Property Value

The following table provides a list of values for CSS text-indent property.

Value	Explanation
Length	Allows you to define the indentation of the text in any CSS length unit.
%	Allows you to define the indentation in % of the width of the parent element.

Using JavaScript

In the following example, we will demonstrate how to change the CSS text-indent property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <h1>CSS text-indent Property</h1> <p>Joanne Rowling was born on 31st July 1965 at Yate General Hospital just outside Bristol, and grew up in Gloucestershire in England and in Chepstow, Gwent, in south-east Wales.</p> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("p")[0]; function myFunction(){ x.style.textIndent = "50px"; } </script> </body> </html>

Run