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.

Check Out Our Sponsors
Check Out Our Host

ANHosting

Free CSS.com is proud to be hosted by ANHosting.com. US Based Support starting at only 23 cents a day.
Use the coupon code FREECSS for 3 free months of hosting. Click Here »

Bookmarks
RSS Feed    Search

Support Free CSS.com. Sign up for a FREE account with MailChimp. No Credit Card Necessary!