CSS text-indent - indent text in a block

CSS text-indent – indent text in a block

on Mar 23, 2016

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

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

css-text-indent

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

<style> 
.box {
  width: 200px;
  background-color: lightgreen;
  text-indent: 40px;
}
</style>

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

text-indent refresh

try it online