In this situation, the two numbers
are added together to calculate the final margin: 25px + (-20px) = 5px.
If the result of this calculation is a negative number, this value will have the effect
of one element overlapping the other. You could say that the negative margin pulls
8 This will also hold true for the margins between nested children and their parents.
151 CSS Layout and Formatting
the element in the opposite direction to that of a positive margin. See margin (p. 209)
for more details about negative margins.
Collapsing Margins Between Parent and Child Elements
So far, we??™ve only addressed the collapsing effect on adjacent elements, but the
same process holds true for parents and children whose margins touch. By ???touch,???
we mean the places at which no padding, borders, or content exist between the
adjacent margins. In the following example, a parent element has a child element
on which a top margin is set:
h1 {
margin: 0;
background: #cff;
}
div {
margin: 40px 0 25px 0;
background: #cfc;
}
p {
margin: 20px 0 0 0;
background: #cf9;
}
In the style sheet above, you can see that a top margin value is declared for the p
element, and in the code excerpt below, you can see that the p element is a child
of the div element:
Heading Content
The result of this code is illustrated in Figure 6.
Pages:
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231