Indent Text with CSS text-indent Property

Many times you would like to leave empty spaces before the starting line of a paragraph — a popular practice called indentation. This can be done with the text-indent CSS property which defines the length of the white space appearing before the first line.

/* set indent in CSS lengths */
text-indent: 20px;
text-indent: 1.5em;

/* negative values are also allowed */
text-indent: -10px;

/* set indent relative to the width of the element */
text-indent: 20%;

Demo

HTML & CSS :

<div id="demo-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip.</div>

#demo-container {
    background-color: #ecf0f1;
    text-indent: 100px;
}

Animation on the text-indent Property

The text-indent property is animatable.

Here is an alternative for the older <marquee> tag using animation on text-indent.

HTML & CSS :

<div id="animate-container">Javascript, CSS & HTML</div>

#animate-container {
    background-color: #ecf0f1;
    color: #d35400;
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    overflow: hidden;
    padding: 20px 0;
    animation-name: text-indent-animate;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-direction: forwards;
    animation-iteration-count: infinite;
}

@keyframes text-indent-animate {
    0% {
        text-indent: -40%;   
    }

    100% {
        text-indent: 100%;
    }
}

For the above animation, the transform property would give a better performance. But this is just a use-case example of the text-indent property.