CSS text-indent – indent text in a block

CSS property text-indent specifies the indentation of the first line of text in a block container. Few points to note about text-indent

  1. In case of percentage indentation is a percentage of the containing block width.
  2. It can take negative value also.
  3. It case cause text to oveflow (negative value of value higher that container block width).


CSS property text-indent

CSS version: CSS 2.1
Value: length | percentage | inherit
Initial: 0
Applies to: block containers
Inherited: yes

Example – positive and negative text-indent

In the following code, CSS property text-indent can be changed to the following values
  • 40px
  • -20px
  • 220px
.box {
  width: 200px;
  background-color: lightgreen;
  text-indent: 40px;

<div class="box">
This is a paragraph to test text identation behaviour
and see how much indentation it introduces.
text-indent refresh



Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments