Your Electronic Books

In the following contrived example, we??™ve nested four div elements, all of which
have a 10px margin applied. Each div has a different background color, so the effects
of the margin collapse will be clearly visible:
CSS Layout and Formatting
The Ultimate CSS Reference 154
.box {
margin: 10px;
}
.a {
background: #777;
}
.b {
background: #999;
}
.c {
background: #bbb;
}
.d {
background: #ddd;
}
.e {
background: #fff;
}

The result of the above CSS is shown in Figure 6.6.
Figure 6.6: Vertical margins after collapse
As you can see in this example, the effect of our CSS is quite dramatic: all the vertical
margins have collapsed to form a single, 10px margin. Unlike the horizontal margin
example, where all the margins were visible, the vertical margins show no such
colors at all, thanks to the background-color that has been applied to each element.


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