Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

174 LESSON 8: Using CSS to Style a Site

The Box Model

When working with CSS, it helps to think of every element on a page as being contained

within a box. This is true of inline elements like <a> or block-level elements like <p>.

Each of these boxes is contained within three larger boxes, and the entire set of four is

refe rred to as the CSS box model. Figure 8.4 shows a diagram of the box model.

LB LP Content

Margin Edge

Border Edge

Padding Edge

Content Edge

LM RP

TP

TB

TM

BP

BB

BM

Bottom

Top

Left RB RM Right

Border

Margin (Transparent)

Padding

The innermost box contains the content of the element. Surrounding that is the padding,

then the border, and finally, the outermost layer (the margin). In addition to properties

that you can use to change how the content is displayed, CSS provides properties that

can be used to change the padding, border, and margins around each box. In this section,

you’ll learn how to modify all the layers in the box model. If you get confused about how

the layers are ordered, just refer to Figure 8.4.

FIGURE 8.4

The CSS box

model.

You can use pretty much any property you like with the pseudo-

selectors for links, and browsers that support them will dynami-

cally reflow the page to accommodate the change. However,

changes that affect the size of the element (such as boldfacing

the text dynamically or increasing the font size) can be very jarring

to users, so use them cautiously.

CAUTION