Pro HTML5 and CSS3 Design Patterns

(avery) #1

CHAPTER 11 ■ SPACING CONTENT


Inline Horizontal Rule


HTML


<h1>Inline Horizontal Rule</h1>

<p>You can insert an inline horizontal rule anywhere.
<span class="hr"></span>↑ Invisible inline horizontal rule — a line-break.
<span class="hr border"></span>↑ Double-border inline horizontal rule.
<span class="hr background"></span>↑ Background inline horizontal rule.
<span class="hr combo"></span>↑ Combination Inline horizontal rule.
</p>

CSS


.hr { display:block; margin:0; }

.border { padding-top:1px; margin-top:25px; margin-bottom:0;
width:auto; margin-left:0; margin-right:0;
border-top:4px ridge blue; border-bottom:4px groove blue;
background:none; background-color:yellow; }

.background { padding-top:5px; margin-top:25px; margin-bottom:0;
width:auto; margin-left:76px; margin-right:76px; border:none;
background:repeat-x left center url("diamond-blue.gif");
background-color:transparent; }

.combo { padding-top:5px; margin-top:25px; margin-bottom:0;
width:400px; margin-left:auto; margin-right:auto;
border-top:4px ridge blue; border-bottom:4px groove blue;
background:repeat-x left center url("diamond-blue.gif");
background-color:white; }
Free download pdf