Pro HTML5 and CSS3 Design Patterns

CHAPTER 13 ■ BLOCKS

Horizontal Rule

Problem You want to insert a horizontal rule between block elements to indicate the beginning of a
new section. You want the horizontal rule to insert styled vertical space between blocks in
the normal flow. You want to style the horizontal rule with margins, borders, background
colors, and tiled images.

Solution HTML provides the

---

element for this purpose. Browsers render it as a gray, 2-pixel
tall, 3D stretched line. Each browser uses a different shade of gray and a slightly different
amount for the vertical margins.
You can style its margins, borders, padding, and background color just like you would style
any block. If you give it a nonzero height, you can even assign it a background image.
Unfortunately, Internet Explorer 7 and earlier versions do not properly apply box model
rules to the horizontal rule, such as padding. And worse, Internet Explorer adds extra
vertical margins and interior borders that you cannot remove. This makes styling the
horizontal rule the same in all major browsers impossible.
If you want to style a horizontal rule and have it work in Internet Explorer, it is best to
embed the horizontal rule within a division, hide the rule, and style the division instead.
You can use display:none to hide the embedded horizontal rule. Because the horizontal
rule is still present, a browser that does not use CSS will still display a horizontal rule, and
the semantic meaning of the horizontal rule is preserved.
You can use width and horizontal margins to align, indent, and offset the parent division.
You can use height to set its height. You can use margin-top and margin-bottom to insert
transparent space above and below the division. You can render a styled line across the
width of the division using border-top and border-bottom. You can also use the
background properties to show or tile an image across the division.

Patterns

HTML

<hr />

or

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

CSS .hr { width:+VALUE;^
height:+VALUE;
margin:±VALUE; border: WIDTH STYLE COLOR;
background:COLOR IMAGE REPEAT H_POSITION V_POSITION; }
.hr hr { display:none; }

Location This pattern applies to horizontal rules.

Related to Block Spacer; Linebreak, Inline Horizontal Rule (Chapter 11)