Using CSS to Style a Site - Web Publishing with HTML and CSS - page 180

As you can see, the text in the inner <div> is jammed right up against the border, and the
inner border and outer border are flush against each other. That's because I've set both
the padding and margin of the inner <div> to 0 . (When you're setting a property to 0
there's no need to specify a unit.) The results in Figure 8.5 show what happens if I
change the style sheet to this:

Input ▼

.outer { border: 2px solid black; }
.inner { border: 2px dotted black;
padding: 15px;
margin: 15px; }

. Output

FIGURE 8.5
The inner <div>
has 15 pixels
of padding and
margin here.

As you can see, I've created some space between the border of the inner <div> and the
text inside the inner <div> using padding , and some space between the border of the
inner <div> and the border of the outer <div> using margin . Now let's look at what hap-
pens when I add some margin and padding to the outer <div> , too. I'm also going to give
both the inner and outer <div> s background colors so that you can see how colors are
assigned to whitespace. (I discuss backgrounds and background colors in the next les-
son.) The results are in Figure 8.6. Here's the new style sheet:

Input ▼

.outer { border: 2px solid black;
background-color: gray;
padding: 15px;
margin: 40px; }
.inner { border: 2px dotted black;
background-color: white;
padding: 15px;
margin: 15px; }