HTML and CSS Reference
In-Depth Information
7.
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
box model.
Figure 6-5.
The Developer Tools panel displays a diagram of the box model of the selected element
8.
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).
9.
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
between elements.
