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 6.1.

Figure 6.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>...

Text of the first item in the list has a few emphasized words in the middle
...

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 6.1, 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.

The Display Property

The display property determines whether an element is displayed as a block, inline, list item, or other type of element.

Name :	display
Value:	inline block list-item run-in inline-block marker table inline-table table-row-group table-header-group table-footer-group table-row table-column- group table-column table- cell table-caption none
Initial:	inline
Applies to:	all elements
Inherited:	no
Percentages:	N/A

The display property has many possible values, but the most common are block and inline . The table values are explained in Chapter 17; the others are explained in the following sections.

The "Block" Value

An element with a block value starts and ends on a new line. For example, the start tag <h1> starts a box that contains the H1 element and the end tag </h1> ends the box. Here are some examples from HTML:

P { display: block }

H1 { display: block }

DIV { display: block }

The "Inline" Value

An element with an "inline" value does not start and end on a new line. It is displayed in a box set on the same line as the previous content. The dimensions of the box depend on the size of the content. If the content is text, it may span several lines, and there will be a box of text on each line. Familiar examples are EM, STRONG , and SPAN :

EM { display: inline }

STRONG { display: inline }

SPAN { display: inline }

All elements have a value for the display property in the browser's default style sheet and, for HTML, that is usually the one you want, so you don't often have to use the display property yourself. But occasionally, you may want to make an LI inline or a SPAN block. Or you may want to set an element back to its normal display type if you cascade off a style sheet that changes the display of an element.

For XML-based documents, the situation is different. The browser probably doesn't have a default style sheet for them, and thus all elements will be "inline" unless you write display properties for them.

The "List-Item" Value

An element with a "list-item" value is displayed as a box with a label. This value typically applies to the LI element of HTML. A series of LI s with this value forms either an OL or UL list.

The LI may or may not have a visible label: a bullet or number that appears to the left of the list item. The characteristics of the label are set with the list-style property, which is dicussed in the section, "More about lists."

The "None" Value

To completely hide an element from view, you can set display to none. The element is not displayed at all. An example is a document with questions and answers interleaved: First, you display the document with the answers hidden and after you try to answer the questions, you change to a different style sheet that shows the answers. The first style sheet could contain something like this:

.answer { display: none }

No boxes are created - not for the element itself and not for its children, either.

The "Run-In" Value

Although headings of sections are normally displayed in a block of their own, such as the heading above this section, it is also possible to put them on the first line of the first paragraph in the section. The effect looks like this:

The run-in value . Although headings of sections are normally displayed in a block of their own, it is also possible to put them on the first line of the first paragraph in the section.

This is called a run-in header . The effect is achieved with two style rules such as the following:

H3 { display: run-in }

H3:after { content: ". " }

The content property and the :after pseudo-element are explained in detail later in this chapter. They are used here to insert a period and a space after the run-in header.

An element can only be displayed run-in if the next element is a block or an inline element. If there is, for example, a list item or a table after the heading, the run-in heading is displayed as a normal block instead.

The "Inline-Block" Value

The inline-block value was added to CSS in the 2.1 edition, but it is already well supported by browsers. The name of the value may first seem like a contradiction in terms - it can't be both inline and block-level? Well, sort of. An element with this value is treated as an inline element seen from the outside, but the content inside the box is formatted as a block-level element. Visually, this makes sense (see Figure 6.2).