HTML and CSS Reference
In-Depth Information
Although using the
clear
property solves the problem of the heading trying to move into the space alongside
a floated image, there's another problem. The gap between the bottom of the image and the heading in most
browsers is very small. To understand why, you need to examine the page in a browser's developer tools.
exerCise: examining Floats and margins
in this exercise, you'll use a browser's developer tools to examine what happens to the margins around a
floated element. use the browser of your choice, but in the instructions and screen shots, i'll be using the
safari Web inspector panel on Windows. The Developer Tools panel in Chrome works identically.
1.
load float_clear.html in the ch07 folder into a browser, and scroll down to the
“monaco and monte Carlo” heading.
2.
Right-click the heading and select
Inspect Element
from the context menu.
3.
Highlight the heading's margins, as shown in Figure
7-8
.
Figure 7-8.
Use the browser's developer tools to inspect the heading's margins
4.
note how the heading's top margin heading overlaps the bottom of the image.
5.
With the heading still selected, expand the
Metrics
pane in the right column of the
Web inspector panel. As Figure
7-9
shows, the heading's top margin is 19px.
(i collapsed the
Styles
pane to take the screen shot.)
