box {
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #000;
margin: 15px;
}
145 CSS Layout and Formatting
The total size of the element above will be calculated as follows:
Total width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px
Total height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px
The above calculation is depicted in Figure 6.2, which is taken from the element
layout display from Firebug,5 the JavaScript and CSS development add-on for
Firefox.
Figure 6.2: The CSS box model in action
In Figure 6.2, we can clearly see the content area in the center, the padding around
the content area, the border area, and the margin area. The outer edge of the content
area is called the content edge or inner edge; the outer edge of the padding area is
called the padding edge; the outer edge of the border area is called the border edge;
and the outer edge of the margin area is called??”you guessed it??”the margin edge
or outer edge.
You can see from this short example that, for this element to fit on the page, we??™ll
need a space that??™s at least 352px wide and 252px high.
Pages:
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222