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

ptg16476052

182 LESSON 8: Using CSS to Style a Site

Input ▼

.outer { border: 2px solid black;

background-color: gray;

padding: 15px; }

.inner { border: 2px dotted black;

background-color: white;

padding: 15px;

margin: 15px; }

body { margin: 20px;

border: 3px solid blue;

padding: 20px;

background-color: yellow;

}

Output ▼

In this example , you can see that you can adjust the margin, padding, and border of a

document’s body. However, unlike other boxes, the background c olor is applied to the

margin as well as the padding.

Controlling Size and Element Display

The one box in the box model I haven’t discussed is the content box. For starters, there

are two types of content boxes: block and inline. In previous lessons, I’ve discussed

block-level elements versus inline elements; this distinction is important in CSS. Block

elements are, by default, as wide as the container you place them within, and you can

modify their height and width using CSS. Block elements are also preceded and followed

by line breaks. Inline elements are only as wide as they need to be to display their con-

tents, as well as the margins, borders, and padding that you apply to them.

FIGURE 8.11

Treating the body

of a document as

a box.