Text Indentation Working with CSS

CSS Web Development Front End Technology

The CSS text-indent property helps us set the indentation of first line of an element.

Syntax

The syntax of CSS text-indent property is as follows −

Selector {
   text-indent: /*value*/
}

Example

The following examples illustrate CSS text-indent property.

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   display: flex;
   float: left;
   margin: auto;
   padding: 10px;
}
article {
   text-indent: 25%;
   background-color: darkseagreen;
   padding: 15px;
   font-size: 1.3em;
}
h3 {
   text-indent: -0.8em;
}
</style>
</head>
<body>
<div>
<h3>Doing it our way. Nothing gonna turn us back now.</h3>
<article>
This is demo paragraph. This is demo paragraph. This is demo paragraph. 
This is demo paragraph. This is demo paragraph. This is demo paragraph. 
This is demo paragraph. This is demo paragraph. This is demo paragraph. 
This is demo paragraph. This is demo paragraph. This is demo paragraph. </article>
</div>
</body>
</html>

Output

This gives the following output −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
ul {
   list-style: none;
   display: flex;
   float: left;
   text-indent: 23px;
   background-image: url("https://www.tutorialspoint.com/angular4/images/angular-4.jpg");
   font-size: 1.5em;
}
li {
   border: thin solid;
}
</style>
</head>
<body>
<ul>
<li>This is demo text. This is demo text.</li>
<li>Angular 4 is a JavaScript framework for building web applications and apps in JavaScript, html, and TypeScript, which is a superset of JavaScript. </li>
<li>Angular provides built-in features for animation, http service, and materials which in turn has features such as auto-complete, navigation, toolbar, menus, etc</li>
<li>This is demo text. This is demo text.</li>
</ul>
</body>
</html>

Output

This gives the following output −

AmitDiwan

Published on 08-Jan-2020 12:49:48

Previous Page Print Page