4.
CSS Layout and Formatting
Figure 6.4: Collapsing margins on a child paragraph
The Ultimate CSS Reference 152
You may have expected that the paragraph would be located 60px from the heading,
since the div element has a margin-top of 40px and there is a further 20px
margin-top on the p element. You may also have expected that 20px of the
background color of the div element would show above the paragraph. This does
not happen because, as you can see in Figure 6.4, the margins collapse together to
form one margin. Only the largest margin applies (as in the case of adjoining blocks),
as we??™ve already seen.
In fact we would get the same result if our div element had no top margin and the
p element had a 40px margin-top. The 40px margin-top on the p element effectively
becomes the top margin of the div element, and pushes the div down the page by
40px, leaving the p element nesting snugly at the top. No background would be
visible on the div element above the paragraph.
In order for the top margins of both elements to be displayed, and for the background
of the div element to be revealed above the p element, there would need to be a
border or padding that would stop the margins collapsing.
Pages:
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232