CSS text-indent

garanews's avatar
garanews's avatar
garanews
Published Jul 23, 2021Updated Oct 31, 2022

The text-indent leaves empty space on the first line in a text-block.

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn CSS

    In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.
    • Beginner Friendly.
      6 hours

Syntax

text-indent: <value>;

The amount of indentation can be specified by using percentages or length values (px, em, etc.).

Example 1

Specifying indentation length with percentages:

p {
  text-indent: 20%;
}

Example 2

Specifying indentation length with px and em values:

.div1 p {
  text-indent: 50px;
}


.div2 p {
  text-indent: 2em;
}

All contributors

Learn CSS on Codecademy

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn CSS

    In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.
    • Beginner Friendly.
      6 hours