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.
<title> Nested Elements </title>
<style type=“text/css”>
.outer { border: 2px solid black; }
.inner { border: 2px dotted black;
padding: 0;
margin: 0; }
<div class=“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 />
Nested <div> s
with no margins or
Search WWH ::

Custom Search