text-indent

by

The text-indent property in CSS sets the indentation of the first line in a text block. It can be defined by positive or negative values.

  • Positive value: Indents the first line to the right.
  • Negative value: Indents the first line to the left.

How to use text-indent:

selector {
  text-indent: value;
}
  • selector: The HTML element you want to style.
  • value: The indentation amount. This can be a length (px, em, rem, etc.), a percentage, or inherit.

Example:

p {
  text-indent: 2em;
}

This will indent the first line of every paragraph by 2 ems.

Values for text-indent:

  • Length: px, em, rem, cm, in, etc.
  • Percentage: A percentage of the containing block’s width.
  • inherit: Inherits the text-indent value from the parent element.

Additional notes:

  • text-indent affects the first line of a block container and each line after a forced line break, but not lines after a soft wrap break.
  • You can use negative values to create a hanging indent.
  • For more complex indentations, consider using CSS columns or other layout techniques.

Example with different values:

p {
  text-indent: 20px; /* Indent by 20 pixels */
}

.hanging-indent {
  text-indent: -1.5em; /* Create a hanging indent */
}