CSS text-indent Property

❮ Previous Reference Next ❯


.example1 {
  text-indent: 50px;

.example2 {
  text-indent: 50%;

.example3 {
  text-indent: -1em;

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.


The text-indent property specifies the indent in the first line of a block-level element.

Default value:0
JavaScript syntax:

Standard Syntax

text-indent: length|%|each-line|hanging|initial|inherit|revert|revert-layer|unset;

Browser Support

The numbers in the table specify the first browser version that fully supports the property.


Property Values

The following table describes the values of this property.

Value Description
length Default value is 0. Specifies a fixed indentation in px, pt, cm, em, etc. Negative length Values are allowed.
%(percentage) Specifies the indentation in % of the width of the parent element. Negative percentage Values are allowed.
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.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  text-indent: 0;

More Example

The following example text-indent to 50px so paragraph will start 50px from left:


p {
  border: 1px solid;
  padding: 10px;
  text-indent: 50px;
❮ Previous Reference Next ❯