Pro HTML5 and CSS3 Design Patterns

CHAPTER 11 ■ SPACING CONTENT

Line Break

HTML

<h1>Line Break</h1>

<p>You can insert a line break anywhere.

<span class="lb-half"></span>↑ One-half line break.

<span class="lb-single"></span>↑ Normal line break.

<br /><br class="br10px" /> ↑ Line break plus 10 pixels.

<span class="lb-one-and-a-half"></span>↑ One-and-a-half line break.

<span class="lb-double"></span>↑ Double line break.

<br /><br class="br3" /> ↑ Triple line break.

<span class="lb-quad">↑ Quadruple line break.</span>

</p>

CSS

.lb-half { display:block; margin-top:-0.5em; }

.lb-single { display:block; margin-top:0; }

.lb-one-and-a-half { display:block; margin-top:1.5em; }

.lb-double { display:block; margin-top:2em; }

.lb-quad { display:block; margin-top:4em; }

.br10px { line-height:10px; }

.br3 { line-height:3em; }