Your Electronic Books

If we simply add a top
border to the div element, we can achieve the effect we were originally looking for:
h1 {
margin: 0;
background: #cff;
}
div {
margin: 40px 0 25px 0;
background: #cfc;
border-top: 1px solid #000;
}
p {
margin: 20px 0 0 0;
background: #cf9;
}
In Figure 6.5, we can see that the div element is still 40px away from the heading,
but the paragraph has been pushed a further 20px down the page, thus revealing
20px of the background of the div element (through the presence of the border).
153 CSS Layout and Formatting
Figure 6.5: Adding a border to the parent
If we didn??™t want a visible top border showing in the design, a 1px top padding on
the div element would have achieved the same effect. Note that the border or padding
should be applied to the parent div because a border on the paragraph would not
stop the margins from collapsing, since the paragraph??™s margin is outside of the
border.
Internet Explorer and Layout
As of this writing, Internet Explorer versions 7 and below will not collapse margins
where the element has a layout.


Pages:
209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233