Cascading Style Sheets: Designing for the Web, Third Edition

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 ...