April 20, 2011, 6:57 a.m.
posted by vlada
The Box Model
An HTML or XML document consists of elements inside other elements. For example, an EM can be inside a P, which is inside BODY, which is inside HTML. In earlier chapters, we showed this as a tree structure, which is a model that helps when we deal with inheritance. This arrangement also could be visualized as a box model, whereby smaller boxes fit inside increasingly larger boxes, as illustrated in Figure.
1. The box model.
<UL> <LI> <P>Text of the first item in the list has <EM>a few emphasized words</EM> in the middle.</P> <LI>...
The box model can depict the structure of an HTML document. The outermost box is the HTML element. The last box contains either text, such as "a few emphasized words" in Figure, or nothing, such as an empty element like BR. In between is everything else – BODY, P, H1, DIV, IMG, etc. A block-level element, such as DIV and P, is normally shown as a box on its own. An inline element, such as EM and SPAN, may be broken into several small boxes, if it is broken across lines. LI is commonly displayed as a box with a marker called a label – a bullet or number – on the side. The size and position of each element is relative to the enclosing box.
Although in CSS, it looks as if the style properties are added to elements, what happens in fact is that the browser creates a parallel structure: For each element in the source, an object, called a formatting object, gets all the properties. The display property determines the type of object and thus the type and number of boxes that are created.
The fact that there is a difference between the elements and the formatting objects created from them can safely be ignored by CSS users, but people creating browsers encounter the objects. Formatting objects also plays a role when you deal with highly complex design tasks, where simply formatting the document is not enough, and the document must be transformed in some other way. In that case, you have to switch to a language other than CSS, for example, XSL. XSL has the same formatting objects and the same properties as CSS, but it also provides ways to create more than one formatting object per element and to rearrange the order of the formatting objects. XSL is also more difficult to use.