display

Support Key: [CSS1|CSS2|CSS2.1] [IE4B1|N4B2|O3.5]
Other Classification Properties
visibility
position
float
clear
= Index DOT Css by Brian Wilson =
  Main Index | Property Index | CSS Support History | Browser History  



   Quick Statistics   
Default Value:
   inline
Applicable Elements:
All
Inherit From Parent:
No
Applicable Media:
All
HTML Equivalent:
NA
Official Docs:
CSS1: Sect. 5.6.1
CSS2: Sect. 9.2.5, CSS2.1: Sect 9.2.4
Microsoft MSDN Reference
What is it?
This property specifies the type of rendering box used for an element. In a language such as HTML where existing elements have well-defined behavior, default 'display' property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. In languages where display behavior is not defined (like XML), the default value is 'inline'.

In addition to the many different allowed display box types, one other value, "none", allows the display of an element to be turned off; all child elements also have their display turned off. The document is rendered as though the element did not exist in the document tree. This value allows for powerful capabilities, but should be used with caution.

"Block" Versus "In-line" Elements
Block-level elements create vertically distinct blocks of content (in the visual context) - generally using a line-break before and after the content. Only this value for the 'display' is allowed to generate a positioned element. Block behavior is exhibited by such HTML elements as BLOCKQUOTEs, DIVs and Headings (Hn.)
'Display' property values creating a block element type: 'block', 'list-item', 'table, 'compact' and 'run-in'

In-line elements do not create distinct blocks of content; element content is rendered using a line box (content is distributed line by line within a containing physical or virtual block element.) In-line behavior is exhibited by such HTML elements as physical and virtual character formatting, non-floated images and unmarked content.
'Display' property values creating an in-line element type: 'inline', 'inline-table', 'compact' and 'run-in'.

Allowed Values
inherit
[CSS2|CSS2.1] [N6|O7]
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
none
[CSS1|CSS2|CSS2.1] [IE4B1|N4B2|O3.5]
Type: Explicit
Description:
This value turns off the display of an element (it has no effect on layout); all child elements also have their display turned off unconditionally. The document is rendered as though the element did not exist in the document tree. To render an element box's dimensions in the document formatting scheme, yet have its contents be invisible, see the 'visibility' property.
inline
[CSS1|CSS2|CSS2.1] [IE5|N6|O3.5]
Type: Explicit
Description:
This causes the element to generate one or more inline element boxes.
block
[CSS1|CSS2|CSS2.1] [IE5|N4B2|O3.5]
Type: Explicit
Description:
This causes the element to generate a block element box.
inline-block
[CSS2.1] [O7]
Type: Explicit
Description:
Introduced in CSS 2.1. This causes the element to generate a block element box that will be flowed with surrounding content as if it were an single inline box (behaving much like a replaced element would.)
list-item
[CSS1|CSS2|CSS2.1] [IE6|N4B2|O4]
Type: Explicit
Description:
This causes the element to generate a block box for the content and a separate list-item inline box.
marker
[CSS2]
Type: Explicit
Description:
This causes an additional marker box to be generated along with the content box. Generated content using the :before and :after pseudo-elements with this display value will place content in the marker box. If a marker is used with another type of element, the value is treated as "in-line." The position of the marker will lie outside the block box.
compact
[CSS2] [O4]
Type: Explicit
Description:
Depending on context, this value for the display property creates either an in-line or block level rendering box. In each case different CSS properties may apply to the compact element. In a block level context, the compact element is rendered in the left or right margin of the block element. The compact element participates in line-height calculations for the current line, and the 'vertical-align' property value is relative to the block element.
run-in
[CSS2|CSS2.1] [O4]
Type: Explicit
Description:
Depending on context, this value for the display property creates either an in-line or block level rendering box. In each case different CSS properties may apply to the run-in element. Properties for the run-in element are inherited from its parent element in the document tree, not from the block element box it participates in.
[table-header-group|table-footer-group]
[CSS2|CSS2.1] [IE5|N6|O4]
Type: Explicit
Description:
These values cause the element to behave like the corresponding THEAD and TFOOT HTML table elements which these values take their name from.
table
[CSS2|CSS2.1] [N6|O4]
Type: Explicit
Description:
These values cause the element to behave like the corresponding HTML table element which these values take their name from. The 'inline-table' value does not have a direct mapping in HTML.
inline-table
[CSS2|CSS2.1] [O4]
Type: Explicit
Description:
These values cause the element to behave like the corresponding HTML table element which these values take their name from. The 'inline-table' value does not have a direct mapping in HTML.
table-caption
[CSS2|CSS2.1] [N6|O4]
Type: Explicit
Description:
These values cause the element to behave like the corresponding HTML table element which these values take their name from. The 'inline-table' value does not have a direct mapping in HTML.
table-cell
[CSS2|CSS2.1] [N6|O4]
Type: Explicit
Description:
These values cause the element to behave like the corresponding HTML table element which these values take their name from. The 'inline-table' value does not have a direct mapping in HTML.
table-row|table-row-group
[CSS2|CSS2.1] [N6|O4]
Type: Explicit
Description:
These values cause the element to behave like the corresponding HTML table element which these values take their name from. The 'inline-table' value does not have a direct mapping in HTML.
table-column|table-column-group
[CSS2|CSS2.1] [N??|O7]
Type: Explicit
Description:
These values cause the element to behave like the corresponding HTML table element which these values take their name from. The 'inline-table' value does not have a direct mapping in HTML.
Example
Ext/Doc: p { display: block }
In-Line:  <p STYLE="display: block">text</p>
Notes Some rendering details of arbitrarily-created tables Browser Peculiarities

Boring Copyright Stuff....