HTML and CSS Reference
In-Depth Information
Figure 6-3.
The Developer Tools highlight the content, padding, and margins in different colors
2.
Position your mouse pointer over the HTMl for the
<div>
in the developer Tools
panel to show the highlighting for the content, padding, and margins. notice that,
although the declared width is
300px
, the tooltip shows the dimensions of the
<div>
as
344px × 164px
. The extra
44px
come from
20px
of padding and the
2px
border
on each side.
3.
next, look at the highlighting for the margins. it extends all the way to the top of the
page and to the top border of the next
<div>
, but there's a small gap on the left
and right.
4.
Move your mouse pointer so that it's over the
<body>
tag in the developer Tools
panel. The margin highlighting changes to a narrow line wrapped around both
<div>
elements, as shown in Figure
6-4
. This is the
8px
default margin that all browsers
add to a web page.
