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-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

Related

Specification

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

Comments

Click here to write/view comments