However, its real purpose is as a divider element, used to divide a document into blocklevel
groups or divisions. Therefore, in CSS-based layouts, the div element??™s role is pivotal:
a number of divs are added to the web page in logical order, creating the basic structure;
each is provided with a unique id relating to its purpose; and the divs are then styled to
provide spacing, padding, backgrounds, and so on.
Just as tables can be abused, so too can div elements. Some websites seemingly suffer
from ???divitis,??? in which designers use too many divs, nesting many inside each other
or adding superfluous divs around elements that don??™t need them. In all cases, you
should hone down your structure, using as few div elements as possible.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
262
Box formatting
The box model is mentioned elsewhere in this book (see Chapter 2 and again in Appendix
D??”CSS Reference), and this is a timely place for a recap, because the box model is something
that confuses some web designers.
In CSS, every element is considered to be within its own box, and you can define the
dimensions of the content and then add padding, a border, and a margin to each edge as
required, as shown in the following image.
?© Jon Hicks (www.hicksdesign.co.uk)
This is one of the trickiest things to understand about the CSS box model: padding, borders,
and margins are added to the set dimensions of the content, and so the sum of these
elements is the overall space that they take up.
Pages:
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364