CSS Property - Display

Value: block | inline | list-item | none
Initial: block
Applies to: all elements
Inherited: no
Percentage values: N/A

This property describes how/if an element is displayed on the canvas (which may be on a printed page, a computer display etc.).

An element with a "display" value of "block" opens a new box. The box is positioned relative to adjacent boxes according to the CSS formatting model. Typically, elements like "H1" and "P" are of type "block". A value of "list-item" is similar to "block" except that a list-item marker is added. In HTML, "LI" will typically have this value.

An element with a "display" value of "inline" results in a new inline box on the same line as the previous content. The box is dimensioned according to the formatted size of the content. If the content is text, it may span several lines, and there will be a box on each line. The margin, border and padding properties apply to "inline" elements, but will not have any effect at the line breaks.

A value of "none" turns off the display of the element, including children elements and the surrounding box.

Example:

p {display: block;}
em {display: inline;}
li {display: list-item;}
img {display: none;}

The last rule turns off the display of images.

The initial value of "display" is "block", but a UA will typically have default values for all HTML elements according to the suggested rendering of elements in the HTML specification 2.