A Complete Guide to Web Design

Horizontal Rules 155

ObjectsImages &

Horizontal Rules

Web Design in a Nutshell, eMatter Edition

Since it is a block-level element, a horizontal rule will always create a line break
above and below. If you want additional space between the rule and the
surrounding elements, insert

tags above and/or below the

---

, as shown in
Figure 9-1.

There are a few attributes for the

---

tag that allow authors to “design” rules
more to their liking. They allow you to change the width, height, alignment of the
rule. You can also opt to turn off the 3-D shaded effect using thenoshade
attribute.

Specifying Thickness

Thesizeattribute controls the thickness or weight of the rule. Size is specified in
number of pixels. See Figure 9-2

Specifying the Rule Length

Somewhat counterintuitively, the length of the rule is controlled by thewidth
attribute (corresponding to the width of the page, I suppose). The value for the
rule width can be provided as a specific pixel length by entering a number, or as a
percentage of the available page width. See Figure 9-3.

Figure 9-1: Inserting a

tag adds vertical space above or below a horizontal rule

Figure 9-2: A 12-pixel rule

Figure 9-3: Rules set to 50% of page width (top) and 100 pixels (bottom)

Line of Text.

<HR>

Line of Text.

<P>

<HR>

<HR SIZE=12>

<HR WIDTH=50%>

<P>

<HR WIDTH=100>