HTML and CSS Reference
In-Depth Information
Margins and Padding
In the box model, there are two ways to control whitespace around a box. Padding is the
whitespace inside the border, and the margin is the whitespace outside the border, sepa-
rating the box from surrounding elements. Let's look at an example that illustrates how
padding and margins work. The web page that follows has one
<div>
nested within
another. The outer
<div>
has a solid black border; the inner
<div>
has a dotted black
border. The page appears in Figure 8.4.
8
Input
▼
<html>
<head>
<title>
Nested Elements
</title>
<style type=“text/css”>
.outer { border: 2px solid black; }
.inner { border: 2px dotted black;
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
FIGURE 8.4
Nested
<div>
s
with no margins or
padding.
