HTML and CSS Reference
In-Depth Information
Figure 7-9.
The Metrics pane exposes the dimensions of the heading's box model
6.
Right-click the image and select
Inspect Element
to highlight the image's margins,
as shown in Figure
7-10
.
Figure 7-10.
The floated image's bottom margin creates the gap between the image and heading
What this exercise has just shown is that the browser ignores the
19px
top margin on the heading and uses
the image's
3px
bottom margin instead. This isn't a bug. it's what the Css specification says should happen
when you use
clear
to move an element below a floated one.
