Pro HTML5 and CSS3 Design Patterns

CHAPTER 11 ■ SPACING CONTENT

Preserved

HTML

<h1>Preserved</h1>

<pre>You can preserve whitespace using <code><pre></code>.</pre>

<p>You can use <code>white-space:pre</code> to insert line breaks and spaces.

<span class="preserved" >

</span>Preserved moves this sentence to a new line and indents it five spaces.

<br />     A better approach is to insert

<code><br /></code> and <code>&nbsp;</code></p>

<p class="preserved">You can preserve

whitespace in blocks.</p>

<p>You can preserve <span class="preserved" >

whitespace </span>in inline elements.</p>

<p class="preserved">You can turn <code>white-space:pre</code>

<span class="not-preserved" >on and off

at any time.</span></p>

CSS

.preserved { white-space:pre; }

.not-preserved { white-space:normal; }