Back to the index.
text-indent
serves to indent the first line of a block of text.
This paragraph has text-indent: 25px
.
The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.
This paragraph has text-indent: -25px
.
The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.
This paragraph has text-indent: 10%
.
The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.
This paragraph has text-indent: -10%
.
The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.
Two special keywords are defined. They should be used in addition to a regular text-indent
declaration.
each-line
gives the defined indentation to each first line after a hard break, such as the one caused by a &;br>
, in addition to the first line.hanging
reverses the affected lines, so that all lines but the first have the defined indentation.This paragraph has text-indent: 25px each-line
.
The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.
The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.
This paragraph has text-indent: 25px hanging
.
The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.
This paragraph has text-indent: 25px each-line hanging
.
The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.
The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.