E-Books for you

155 CSS Layout and Formatting
The whole block will be positioned 10px from other in-flow elements on the page,
but each nested block will collapse its margins into a single margin.
As discussed earlier, the simplest way to stop the margin collapse from occurring
is to add padding or borders to each element. If we wanted 10px margins on each
element we could simply use a 9px margin and 1px of padding to get the result we
wanted:
.box {
margin: 9px;
padding: 1px;
}
The result of that small change will ???un-collapse??? the vertical margins, as you can
see in Figure 6.7.
Figure 6.7: Margins haven??™t collapsed
Again, it??™s important to consider the effects that layout in Internet Explorer would
have in the above demonstrations. Should the elements in the first example (Figure
6.6) have a layout in IE, the result would be exactly as shown in Figure 6.7. It??™s also
worth noting that in browsers other than IE, the same effect would occur if the
overflow property was added with a value other than visible.


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