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

(singke) #1
ptg16476052

178 LESSON 8: Using CSS to Style a Site


padding: 0;
margin: 0; }
</style>
</head>
<body>
<div class="outer">
Outer.
<div class="inner">
Friends, Romans, countrymen, lend me your ears;<br />
I come to bury Caesar, not to praise him.<br />
The evil that men do lives after them;<br />
The good is oft interred with their bones;<br />
So let it be with Caesar. The noble Brutus<br />
</div>
</div>

</body>
</html>

Output ▼


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 the 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.8 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; }

FIGURE 8.7
Nested <div>s
with no margins or
padding.
Free download pdf