Learning Web Design, 6th Edition

Chapter 15. Thinking Inside the Box

15

Thinking Inside the Box

The CSS Box MOdel

In this chapter

The parts of an element box

Setting box dimensions

Padding

Borders

Outlines

Margins

Assigning display roles

Adding a drop shadow

In Chapter 11, Introducing Cascading Style Sheets, I described the box model as one of the fundamental concepts of CSS. According to the box model, every element in a document generates a box to which properties such as width, height, padding, borders, and margins can be applied. You probably have a feel for how element boxes work from adding backgrounds to elements. This chapter covers all the box-related properties, starting with an overview of the components of an element box and then taking on the box properties from the inside out: content dimensions, padding, borders, and margins.

The Element Box

As you’ve seen, every element in a document, both block-level and inline, generates a rectangular element box. The components of an element box are diagrammed in Figure 15-1. Pay attention to the new terminology—it will be helpful for keeping things straight later in the chapter.

Figure 15-1. The parts of an element box according to the CSS box model

The defined aspects of an element box are as follows:

Content area

At the core of the element box is the content itself. In Figure 15-1, the content area is indicated by a white box.

Inner edges