HTML and CSS Reference
In-Depth Information
10. Amend the style rule for the paragraphs to add a similar right margin, and increase
the left margin by
10px
to compensate for the margin on the headings:
p {
margin-left:
40
px;
margin-right: 10px;
}
11.
Save the style sheet, and reload destinations.html in the browser. The text is no
longer jammed against the sides of the screen, as Figure
6-9
shows.
Figure 6-9.
The text has been moved of the edges of the browser window
12. The horizontal space looks oK, but there's too much vertical space between the
second level headings and the following paragraphs. Amend the
h2, h3
style rule
like this:
h2, h3 {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 0.5em;
}
13.
Save the style sheet and reload the page. The distance between the headings and
paragraphs barely changes.
14.
Try changing the value of
margin-bottom
to
0.25em
, and test it again. it makes no
difference.
15.
Use the developer tools in your browser to inspect one of the
<h2>
elements.
For example, in Chrome, right-click a heading and select
Inspect Element
from
