E-Books for you

To demonstrate, the following rule sets several properties that affect the dimensions
of .box elements:
.box {
width: 200px;
height: 150px;
padding: 10px;
border: 1px solid #000;
margin: 15px;
}
The total size of the element, using the IE5 box model, will be calculated as follows:
Total width = 200 + 15 + 15 = 230px (width + margins)
Total height = 150 + 15 + 15 = 180px (height + margins)
It follows that the available content area is reduced, because padding and borders
have to be subtracted from the dimensions that were declared. The available content
size, using the IE5 box model, would be calculated as follows:
9 Although we??™re calling it the IE5 box model, it??™s also known as the broken box model.
157 CSS Layout and Formatting
Available content width = 200 - 10 - 10 - 1 - 1 = 178px
Available content height = 150 - 10 - 10 - 1 - 1 = 128px
Compare this with the dimensions for the correct box model in Table 6.1, and you
can see that this method of calculation will make a considerable difference to the
element??™s size.


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