HTML and CSS Reference
Figure 6-3. The Developer Tools highlight the content, padding, and margins in different colors
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.
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
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.