HTML and CSS Reference
Figure 6-4. Browsers add a default 8px margin around the <body> of a web page
Move your mouse pointer back over the HTMl for the
padded <div> in the
developer Tools panel. it should be obvious that the gap on the left and right is
accounted for by the 8px margin on the <body> . What might not be quite so obvious
is why the margin highlighting in Figure 6-4 is pushed away from the top of the
page. The reason is that the top margins on the <body> and the padded <div> have
been collapsed, and the 20px margin on the <div> overlaps the smaller margin,
pushing it away from the top.
Position your mouse pointer over the second
<div> in the developer Tools
panel. Then move it back over the first <div> . As you switch between them, the
highlighting should make it obvious that the bottom margin of the first <div>
occupies the same space as the top margin of the second one.