Therefore, to ascertain the total space required to place an element on the page, add
the content area??™s dimensions to any padding, borders, and margins that have been
declared. Of course, an element may have no padding, border, or margins, in which
case its dimensions will be dictated solely by its content.
If an element contains only floated or absolutely positioned elements, it will have
no content at all, and its height will be zero. We??™ll discuss this more in Floating and
Clearing (p. 180).
Implementing the Box Model
The box model is best demonstrated with a short example. The calculation we??™ll
use to ascertain the total space required to accommodate an element on the page
(ignoring margin collapse for the time being??”see below for more on this) will be
as follows:
Total width = left margin + left border + left padding + width +
right padding + right border + right margin
Total height = top margin + top border + top padding + height +
bottom padding + bottom border + bottom margin
Here??™s our example CSS??”a rule set that contains declarations for all the box
properties of an element that has the class "box":
.
Pages:
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221