Pro HTML5 and CSS3 Design Patterns

CHAPTER 11 ■ SPACING CONTENT

Inline Horizontal Rule

Problem You want to insert a styled line break in between inline elements. You cannot use the horizontal rule
because that works only between block elements.

Solution Apply styles to your chosen class or ID as follows:^
Use display:block to display the inline element as a block element. This puts the horizontal rule on its
own line and stretches it across the width of its containing block.

Use padding-top to make space for the background color and image.

Use margin-top:+VALUE to insert space above the horizontal rule.

Use margin-top:-VALUE to overlap the rule with the previous line.

Use margin-bottom:+VALUE to insert space below the rule.

Use margin-bottom:-VALUE to overlap the rule with the next line.

Use width:auto, margin-left:0, and margin-right:0 to stretch the rule to the left and right sides of

the containing block.

Use width:auto, margin-left:±VALUE, and margin-right:±VALUE to stretch the rule to the left and

right margins of the containing block.

Use width:+VALUE, margin-left:auto, and margin-right:auto to size and center the rule.

Use border-top to display a border above the rule.

Use border-bottom to display a border below the rule.

Use background-image to display a background image in the rule.

Use background-repeat:repeat-x to tile an image across the rule.

Use background-position:left center to position the background image in the vertical middle of

the rule.

Use background-color to display a background color in the rule.

Pattern
HTML

<span class="hr"></span>

CSS

.hr { display:block;

padding-top:+VALUE; width:+VALUE;

margin-top:±VALUE; margin-bottom:±VALUE;

margin-left:±VALUE; margin-right:±VALUE;

border-top:WIDTH STYLE COLOR;

border-bottom:WIDTH STYLE COLOR;

background-image:url("FILE.EXT");

background-position:left center;

background-repeat:repeat-x;

background-color:COLOR; }

Location This pattern applies to inline elements.

Tip display:block; is the only required rule. The rest are optional and can be used in any combination.
This design pattern is much more versatile than the line break, which cannot be styled.

Related to Line Break; Block Horizontal Rule, Block Spacer, Block Space Remover (Chapter 13)