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 LIs 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).

Figure 6.2. Lines within lines.