Text Indenting and Outdenting with CSS

Indenting and outdenting text are done using the text-indent property. It is inherited and allows you to specify by how much to move, horizontally (left or right), the beginning of the first line of text content of an element. When the first line is pushed in to the right, it is known as an indent. When it is pushed out to the left, it is an outdent (or a hanging indent). The types of values the property takes are length values (such as px and em), which may be negative values, and percentage values, which specifies distance as a percentage of the block containing the text. How the property is used and its effects are shown Figures 14.11 and 14.12.

In the example, the p.indent{} rule moves the first line of the <p> element of class=“indent” right by 3em. The p.outdent{} rule moves the first line of the <p> element of class=“outdent” left by 3em, but also specifies 3em margin-left for the element to move all the paragraph right by the same amount.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *