untitled

Chapter 9: Spacing Out with Boxes 171

You can use these properties to create various special effects within boxes.

However, you could specify only a bottom border, for instance, and draw that

border in quite a few different ways. In fact, the border-bottomproperty can

specify a series of values that apply only to the bottom line of the four possi-

ble border lines.

Adding a border .................................................................................

If you want a paragraph to be underlined with a one-inch thick blue dotted

line, use this code to get the result shown in Figure 9-2:

<p style=”border-bottom: 12px blue dotted”>

You can apply this same offsetting principle to text in

various ways.

</p>

<p>

This is the next paragraph.

</p>

Adding padding .................................................................................

Now add padding to the previous example to see how space is added

between the bottom of the text (the bottom of the content area) and the

border. The content in Figure 9-3 is padded:

<p style=”border-bottom: 12px blue dotted; padding-

bottom=.5in;”>

You can apply this same offsetting principle to text in

various ways.

</p>

Figure 9-2:
A border-
bottom
property
specifies
blue, 12-
pixel dots
for the
bottom
border line
only.