Chapter 8. Space Around Boxes

In this chapter, we discuss properties that affect spacing around block-level elements. Recall from Chapter 6, "The fundamental objects," that we talked about the box model. In accordance with that model, a block-level element such as a paragraph or heading is drawn inside an imaginary rectangular bounding box that fits tightly around the text, as illustrated in Figure 8.1. (The dashed line is for illustration purposes only and does not show up on the screen.)

Figure 8.1. A paragraph within a bounding box.

Outside the bounding box are three "belts" that can be manipulated in a style sheet:

• margin

• padding

• border

Figure 8.2 shows how these belts are layered around a paragraph.

Figure 8.2. Example block-level element with three belts around it. The dashed lines only indicate the boundaries of the belts and are not visible on the screen.

The next three sections discuss the properties that let you adjust the margins, padding, and borders of block elements. Then, we discuss additional properties that let you fine-tune the spacing of elements:

• width

• height

• float

• clear