HTML and CSS Reference
In-Depth Information
8.
save the style sheet, and test the page again. As Figure
8-25
shows, the problem
with the gap at the top of the page has been solved, but the text is too close to the
top of the
main
and
aside
<div>
elements.
Figure 8.
25. The main content and sidebar need headroom
9.
The lack of space is caused by style rules that remove the top margin from
paragraphs and from the first
<h3>
heading in the sidebar. delete or comment out
the following style rule:
h3:first-child {
margin-top: 0;
}
Restoring the top margin to the heading in the sidebar resolves the problem, but
10.
adding a top margin to the first paragraph in the main content seems to have no
effect. What explains the different behavior? The sidebar is floated, so it's removed
from the normal flow of the document. As a result, the top margin is applied
inside
the
<div>
. However, the main content is not floated, so the rule of collapsing vertical
margins applies. Any margin on top of the first paragraph overlaps the
15px
top
margin on the
main <div>
. To create a gap between the white background and the
text, you need to add padding to the
<div>
. it also needs some breathing space at
the bottom, so amend the
#main
style rule like this to add
18px
padding at the top
and bottom, but none on the sides:
#main {
width: 65%;
margin-right: 35%;
background-color: #FFF;
margin-top: 15px;
padding: 18px 0;
}
The interaction of margins and backgrounds can be puzzling at times. Thankfully, browser developer tools
make it easy to inspect where a margin is being applied. Frequently, the solution is to use padding instead of
a margin. unlike adjacent vertical margins, padding never collapses.
