css
  1. css-text-indent
PreviousNext

CSS Text Indent

The text-indent property in CSS specifies the indentation of the first line of a block of text. It allows you to control the space between the left (or right, for right-to-left text) margin and the start of the text content.

Basic Usage of the text-indent Property

The text-indent property takes various length and percentage values:

  • text-indent: length;: Sets the indentation using specific length values like pixels or em.
  • text-indent: percentage;: Specifies the indentation in percentage relative to the width of the containing block.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .indented-text {
    text-indent: 30px;
  }
</style>
</head>
<body>

<p class="indented-text">This text has an indentation of 30 pixels at the beginning of the first line.</p>

</body>
</html>
Try Playground

Benefits of Using text-indent Property

  • Readability Enhancement: Helps in visually separating paragraphs or indicating the start of new content.
  • Structural Organization: Aids in providing a clear structure by indenting text content.

Best Practices for Using text-indent

  • Appropriate Application: Use text-indent selectively to distinguish different blocks of text for better organization.
  • Responsive Design: Consider using relative units for indentation to adapt to different screen sizes.

Understanding and applying the text-indent property allows for the effective indentation of the first line of text within elements, contributing to improved readability and a structured layout in web design.

Text OverflowText Justify
Published on: