Next / Previous / Contents / TCC Help System / NM Tech homepage

11. The display property: What kind of box is this?

Certain tags such as p and blockquote are always set as block-level elements, which means that they are always preceded and followed by a line break.

Other tags, such as em and a are inline elements: the beginning and ending of these elements does not force a line break.

Still other tags, such as an li element inside a ul element, are displayed as list items, preceded by a bullet (or number, as inside an ol element).

You can change the way a given element is displayed by using a rule that sets its display property to one of these values:

block

Force the element to be displayed as a block element, with line breaks before and after it.

inline

Display the element inline. This element can be put on the same line with other inlines, and may be broken over multiple lines.

list-item

Display the element as a list item. Each item is a principal box, optionally preceded by a marker.

none

Don't display this element at all. Don't even leave space for it in the rendering.

For example, the rule

  p.optional { display: none; }

would cause an element of the form p class='optional' to disappear altogether.

marker

This box type is used with the :before and :after pseudo-elements to display generated content like the bullets or item numbers before list items.

run-in

If this element is followed by a block element, treat this element as the first inline box of that block. If not followed by a block element, treat this element as a block element.

compact

Render this element in the left margin. If its content fits entirely in that margin, place it there, and any following block will appear to its right.

If the content doesn't fit in the margin, render it as a separate block.

table

Render this element as if it were table.

inline-table

Render this element as a table, but make the entire table act as an inline box.

table-row, table-row-group, table-header-group, table-footer-group, table-column, table-column-group, table-cell, table-caption

Specify one of these values to make the element act as if it were part of a table. For more information, see Section 18, “Tables”.