Pro HTML5 and CSS3 Design Patterns

CHAPTER 12 ■ ALIGNING CONTENT

Hanging Indent

HTML

<h1>Hanging Indent</h1>

<p class="hanging-indent">A hanging indent uses a negative value for

<code>text-indent</code> and a positive value for <code>padding-left</code>.

Hanging indents work only in terminal block elements like this paragraph.</p>

<p class="hanging-indent2">If you do not want the hanging indent to

go all the way to the left, make the positive value in <code>padding-left</code>

larger than the absolute value of <code>text-indent</code>.</p>

CSS

.hanging-indent { text-indent:-50px; padding-left:50px; }

.hanging-indent2 { text-indent:-50px; padding-left:70px; }

/* Nonessential rules are not shown. */