HTML and CSS Reference
With the padded
<div> still selected in the developer Tools panel, scroll down the
right pane and expand the Metrics and Properties sections, as shown in Figure 6-5 .
The Metrics section shows a diagrammatic representation of the <div> element's
Figure 6-5. The Developer Tools panel displays a diagram of the box model of the selected element
Expand the first
HTMLDivElement in the Properties section. This displays a long list
of the element's attributes in alphabetical order. Examining this list can be useful for
debugging problems, although it can feel overwhelming if you're not familiar with
the document object Model (doM).
Scroll down to locate
offsetLeft . its value is 28 , indicating that the <div> is 28px
from the left of the screen. The next property, offsetParent , is HTMLBodyElement ,
confirming that the 8px comes from the <body> . immediately following is
offsetTop , which is 20 . So, the <div> is 28px from the left, but only 20px from the
top of the page. The difference is accounted for by the way adjacent vertical margins
collapse, but horizontal ones do not.
Understanding how adjacent vertical margins collapse is vital to successful page layout with CSS. Using
a browser's tools to highlight margins greatly simplifies troubleshooting problems with the vertical space