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;
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;
Save the style sheet and reload the page. The distance between the headings and
paragraphs barely changes.
Try changing the value of margin-bottom to 0.25em , and test it again. it makes no
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
Search WWH ::

Custom Search