Pro HTML5 and CSS3 Design Patterns

CHAPTER 13 ■ BLOCKS

Horizontal Rule

HTML

<h1>Horizontal Rule</h1>

<p>This paragraph is followed by a standard horizontal rule.</p>

<hr />

<p>This paragraph is followed by an embedded and styled horizontal rule.</p>

<div class="hr"><hr /></div>

<p>This paragraph is preceded by an embedded and styled horizontal rule.</p>

CSS

.hr { height:40px; width:200px;

margin:0 auto 0 auto;

border:0;

background:url("hr.gif") repeat-x left center;

line-height:1px; font-size:1px; }

.hr hr { display:none; }

/* Nonessential rules are not shown. */