1. Web
  2. CSS
  3. Reference
  4. Properties
  5. text-indent
View on MDN

text-indent

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

The text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a block.

Try it

text-indent: 0;

text-indent: 30%;

text-indent: -3em;

text-indent: 3em each-line;

text-indent: 3em hanging;

text-indent: 3em hanging each-line;

<section id="default-example">
  <div id="example-element">
    <p>
      This text is contained within a single paragraph. This paragraph is two
      sentences long.
    </p>
    <p>
      This is a new paragraph. There is a line break element
      <code>&lt;br&gt;</code> after this sentence.<br />There it is! Notice how
      it affects the indentation.
    </p>
  </div>
</section>

section {
  font-size: 1.25em;
  background-color: darkslateblue;
  align-items: start;
}

#example-element {
  text-align: left;
  margin-left: 3em;
  background-color: slateblue;
  color: white;
}

Syntax

css
/* <length-percentage> values */
text-indent: 3mm;
text-indent: 40px;
text-indent: 15%;

/* with keyword values */
text-indent: 5em each-line;
text-indent: 5vb hanging;
text-indent: 5% hanging each-line;

/* Global values */
text-indent: inherit;
text-indent: initial;
text-indent: revert;
text-indent: revert-layer;
text-indent: unset;

Values

<length>

Indentation is specified as an absolute <length>. Negative values are allowed. See <length> values for possible units.

<percentage>

Indentation is a <percentage>. The percentage is relative to the containing block's width.

each-line

Indentation affects the first line of the block container as well as each line after a forced line break, but does not affect lines after a soft wrap break.

hanging

Inverts which lines are indented. All lines except the first line will be indented.

Description

Relevant to block container's, the text-indent CSS property sets the length of empty space (indentation) that is put before lines of text. The indentation set by the property occurs at the inline-start edge of the content box. The value is a <length-percentage>, optionally with one or both of the keywords each-line and/or hanging. The initial value is 0.

Percent values are relative to to block container's inline-axis inner size; which is the dimension of the content-area only, excluding the container's padding and border.

The <length-percentage> can be a positive or negative value. A negative value creates an outdent equal to the absolute value of the <length-percentage> equivalent positive value. A negative value effectively pushes the text the size of the value, but in the opposite direction. For example, text-indent: 3%; indents the first line of text , adding white space that is 3% of the container's inner-size before the text, pushing the first line of content toward the inline-end direction. Setting text-indent: -3% outdents the first line of text, pushing the start of the first line of text 3% of the container's inner-size past the inline-start of the content area, into the padding and border, possibly overflowing the containter.

A negative value is different from adding the hanging keyword to a positive value. Continuing with the same example, text-indent: 3% hanging doesn't outset the first line of text. Rather, it insets all the lines of text except the first line, by 3% of the container's inner-size.

Formal definition

Initial value0
Applies toblock containers
Inheritedyes
Percentagesrefer to the width of the containing block
Computed valuethe percentage as specified or the absolute length, plus any keywords as specified
Animation typea length, percentage or calc();

Formal syntax

text-indent = 
  [ <length-percentage> ]  &&
  hanging?                 &&
  each-line?               

<length-percentage> = 
  <length>      |
  <percentage>

Examples

Basic usage

This example demonstrates the basic usage of the text-indent property.

HTML

We include two paragraphs of text.

html
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

CSS

Our use the text-indent property to indent the first line of each paragraph by 5em.

css
p {
  text-indent: 5em;
  background: powderblue;
}

Result

Percentage indent

Using the same HTML as in the previous example, here we demonstrate using percentage values and how percentage values are relative to the element's content area in the inline direction.

CSS

We set the text-indent to a percentage value. We also added padding and vertical stripes to better enable guaging the size of the indentation relative to the element's box model.

css
p {
  text-indent: 30%;

  padding: 30px;
  background-image: repeating-linear-gradient(to right, transparent 0 9.5%, #dedede 9.5% 10%);
  background-color: plum;
}

Result

Skipping indentation on the first paragraph

A common typographic practice when paragraph indentation is present is to skip the indentation for the first paragraph. As The Chicago Manual of Style puts it, "the first line of text following a subhead may begin flush left or be indented by the usual paragraph indention."

Treating first paragraphs differently from subsequent paragraphs can be done using the next-sibling combinator, as in the following example:

HTML

html
<h2>Lorem ipsum</h2>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu
  venenatis quam. Vivamus euismod eleifend metus vitae pharetra. In vel tempor
  metus. Donec dapibus feugiat euismod. Vivamus interdum tellus dolor. Vivamus
  blandit eros et imperdiet auctor. Mauris sapien nunc, condimentum a efficitur
  non, elementum ac sapien. Cras consequat turpis non augue ullamcorper, sit
  amet porttitor dui interdum.
</p>

<p>
  Sed laoreet luctus erat at rutrum. Proin velit metus, luctus in sapien in,
  tincidunt mattis ex. Praesent venenatis orci at sagittis eleifend. Nulla
  facilisi. In feugiat vehicula magna iaculis vehicula. Nulla suscipit tempor
  odio a semper. Donec vitae dapibus ipsum. Donec libero purus, convallis eu
  efficitur id, pulvinar elementum diam. Maecenas mollis blandit placerat. Ut
  gravida pellentesque nunc, in eleifend ante convallis sit amet.
</p>

<h2>Donec ullamcorper elit nisl</h2>

<p>
  Donec ullamcorper elit nisl, sagittis bibendum massa gravida in. Fusce tempor
  in ante gravida iaculis. Integer posuere tempor metus. Vestibulum lacinia,
  nunc et dictum viverra, urna massa aliquam tellus, id mollis sem velit
  vestibulum nulla. Pellentesque habitant morbi tristique senectus et netus et
  malesuada fames ac turpis egestas. Donec vulputate leo ut iaculis ultrices.
  Cras egestas rhoncus lorem. Nunc blandit tempus lectus, rutrum hendrerit orci
  eleifend id. Ut at quam velit.
</p>

<p>
  Aenean rutrum tempor ligula, at luctus ligula auctor vestibulum. Sed
  sollicitudin velit in leo fringilla sollicitudin. Proin eu gravida arcu. Nam
  iaculis malesuada massa, eget aliquet turpis sagittis sed. Sed mollis tellus
  ac dui ullamcorper, nec lobortis diam pellentesque. Quisque dapibus accumsan
  libero, sed euismod ipsum ullamcorper sed.
</p>

CSS

css
p {
  text-align: justify;
  margin: 1em 0 0 0;
}
p + p {
  text-indent: 2em;
  margin: 0;
}

Result

Specifications

Specification
CSS Text Module Level 3
# text-indent-property

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content