HTML and CSS Reference
In-Depth Information
the context menu. Then select the HTMl for the heading in the developer Tools
panel. As Figure
6-10
shows, the highlighting around the heading reveals that the
bottom margin doesn't occupy the full vertical space between the heading and the
following paragraph. it's the top margin on the paragraph that's causing the gap.
Figure 6-10.
Using the browser's developer tools helps explain what's causing the gap
16. Remove the top margin from the paragraphs by amending their style rule like this:
p {
margin-left: 40px;
margin-right: 10px;
margin-top: 0;
}
17.
Save the style sheet and test the page again. The vertical gap between the
headings and the following paragraphs is now much smaller, but the space
between individual paragraphs remains unchanged. This is because the default
bottom margin still occupies the space between paragraphs.
The styles created in this exercise use type selectors to redefine the default margins around the
<body>
,
paragraphs, and headings. The exercise also demonstrated the importance of checking the size of adjacent
vertical margins when trying to adjust the distance between block-level elements.
