They will not be 45px
(25+20) apart, as might be expected.
This behavior is best demonstrated with a short example. Consider the following
code:
7 In CSS2.1, horizontal margins do not collapse.
CSS Layout and Formatting
The Ultimate CSS Reference 150
h1 {
margin: 0 0 25px 0;
background: #cfc;
}
p {
margin: 20px 0 0 0;
background: #cf9;
}
Figure 6.3: Collapsing margins in action
As you??™ll see from Figure 6.3, the gap between the elements is only 25px, and the
smaller margin has collapsed to zero. If in the above example the elements had
equal margins (say, 20 pixels each), the distance between them would be only 20px.8
There is one situation that will cause a slight deviation from the behavior of
collapsing margins: should one of the elements have a negative top or bottom margin,
the positive and negative margins will be added together to reach the final, true
margin. Here??™s an example style sheet that demonstrates the concept:
h1 {
margin: 0 0 25px 0;
background: #cfc;
}
p {
margin: -20px 0 0 0;
background: #cf9;
}
The bottom margin of the h1 element is a positive number (25px), and the top margin
of the p element is a negative number (-20px).
Pages:
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230