HTML and CSS Reference
In-Depth Information
Figure 6-4.
Browsers add a default 8px margin around the <body> of a web page
5.
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.
6.
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.
