ptg16476052The Box Model 1798
Output ▼
As you can see, I’ve created some space between the border of the inner
and the
text inside the inner
text inside the inner
using padding, and some space between the border of the
inner
inner
and the border of the outer
using margin. Now let’s look at what hap-
pens when I add some margin and padding to the outer
pens when I add some margin and padding to the outer
, too. I’m also going to give
both the inner and outer
both the inner and outer
s background colors so that you can see how colors are
assigned to whitespace. (I discuss backgrounds and background colors in a later lesson.)
The results are in Figure 8.9. Here’s the new style sheet :
assigned to whitespace. (I discuss backgrounds and background colors in a later lesson.)
The results are in Figure 8.9. 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; }
FIGURE 8.8
The inner <div>
has 15 pixels of
padding and mar-
gin here.