HTML and CSS Reference
Figure 7-9. The Metrics pane exposes the dimensions of the heading's box model
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.