text-indent

The text-indent CSS property specifies the indentation applied to lines of inline content in a block.

Syntax

CSS

text-indent: value;

JS

object.style.textIndent = "value";

Values

<'text-indent'> = [ <length-percentage> ] && hanging? && each-line?

<length-percentage> = [ <length> | <percentage> ]

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

hanging

Inverts which lines are affected.

each-line

Indentation affects the first line of each block container and each line after a forced line break (but not lines after a soft wrap break).

Initial

<!doctype html>
<html>
<head>
    <style>
        p {
            text-indent: 10%;
        }
    </style>
</head>
<body>
    <p>percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage percentage</p>
</body>
</html>

hanging

each-line

<!doctype html>
<html>
<head>
    <style>
        p {
            text-indent: 10px each-line;
        }
    </style>
</head>
<body>
    <p>each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line each-line</p>
</body>
</html>

JS

<!doctype html>
<html>
<head>
    <script>
        function mouseover(value) {
            document.getElementsByTagName("p")[0].style.textIndent = value;
        }
    </script>
</head>
<body>
    <input onmouseover="mouseover(value)" type="button" value="initial">
    <button onmouseover="mouseover(value)" value="10px">length</button>
    <button onmouseover="mouseover(value)" value="10%">percentage</button>
    <button onmouseover="mouseover(value)" value="10px hanging">hanging</button>
    <button onmouseover="mouseover(value)" value="10px each-line">each-line</button>
    <p>text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent text-indent</p>
</body>
</html>

Syntax

CSS

JS

Values

Initial

Examples

length

percentage

hanging

each-line

JS

Links

Internal

External