HTML and CSS Reference
In-Depth Information
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
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
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.
Search WWH ::

Custom Search