mozilla

Revision 16573 of display

  • Revision slug: CSS/display
  • Revision title: display
  • Revision id: 16573
  • Created:
  • Creator: grendel
  • Is current revision? No
  • Comment Added new compatibility table; 54 words added

Revision Content

{{ CSSRef() }}

Summary

The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline.

In addition to the many different display box types, the 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.

  • {{ Xref_cssinitial() }}: inline
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified, except for root element, floated elements, and absolutely positioned elements

Syntax

display:  <display-value> | {{ Cssxref("inherit") }}

Values

<display-value> can be any of the following values:

none
Turns off the display of an element (it has no effect on layout); all child elements also have their display turned off. The document is rendered as though the element did not exist.
To render an element box's dimensions, yet have its contents be invisible, see the {{ cssxref("visibility") }} property.
inline
The element generates one or more inline element boxes.
block
The element generates a block element box.
inline-block {{ gecko_minversion_inline("1.9") }}
Introduced in CSS 2.1. The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).
list-item
The element generates a block box for the content and a separate list-item inline box.
compact
Unsupported, dropped from the CSS 2.1 standard.
run-in
Dropped from the final CSS 2.1 standard (but may be in CSS 3), but supported by other browsers.
{{ unimplemented_inline("2056") }} in Gecko/Firefox
  1. If the run-in box contains a block box, same as block.
  2. If a block box follows the run-in box, the run-in box becomes the first inline box of the block box.
  3. If a inline box follows, the run-in box becomes a block box.
table
Behaves like the <table> HTML element.
inline-table {{ Fx_minversion_inline("3") }}
The inline-table value does not have a direct mapping in HTML.
table-caption
Behaves like the <caption> HTML element.
table-column | table-column-group
These elements behave like the corresponding <col> and <colgroup> HTML elements.
table-header-group | table-row-group | table-footer-group
These elements behave like the corresponding <thead> | <tbody> | <tfoot> HTML elements.
table-row
Behaves like the <tr> HTML element.
table-cell
Behaves like the <td> HTML element.

Mozilla Extensions

These display values are not intended for use in web content. [fixme: needs update]

-moz-inline-block {{ obsolete_inline() }}
Never supported reliably.
-moz-inline-table {{ obsolete_inline() }}
Never supported.
-moz-box
Child elements are laid out horizontally or vertically (based on the value of the {{ cssxref("-moz-box-orient") }} property).
-moz-inline-box
-moz-groupbox
-moz-grid
-moz-inline-grid
Child elements are laid out as a XUL {{ xulelem("grid") }}.
-moz-grid-group
Child elements are laid out as a group of grid columns or rows. This is the layout used by the rows and columns elements. You can use the orientation (-moz-box-orient) to set which direction. Rows would normally have vertical orientation and columns would have a horizontal orientation.
-moz-grid-line
Child elements are laid out as a single column or row of a grid. You can use the orientation (-moz-box-orient) to set which direction.
-moz-stack
Child elements are laid out one on top of each other like the XUL {{ xulelem("stack") }} element.
-moz-inline-stack
Child elements, including inline-block, block, and -moz-inline-stack are laid out atop one another.
-moz-deck
Child elements are laid out one on top of each other like the XUL {{ xulelem("deck") }} element. Unlike a stack, only the top element is displayed.
-moz-popup
-moz-marker

Examples

{{ CSSRefExampleLink("display") }}

p.secret  { display: none }
<p style="display:none"> invisible text </p>

Notes

"Block" versus "in-line" elements

  • Block-level elements create vertically distinct blocks of content - 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 <p>, <div>, <blockquote> or <h1>. 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-block, inline-table and run-in.

{{ h3_gecko_minversion("XBL bindings and display:none", "2.0") }}

Starting in Gecko 2.0 {{geckoRelease("2.0"), XBL bindings are no longer attached to elements when in subtrees of the DOM styled with display: none when they're first accessed from JavaScript, unless the elements in question are XUL.

Browser compatibility

Browser Lowest version Support of run-in support
Internet Explorer 4.0 none | inline | block  
5.5 (- 7.0) inline-block (natural inline elements only)  
6.0 list-item  
8.0 all CSS 2.1 values yes
Firefox (Gecko) 1.0 (1.0) (except run-in, inline-block, inline-table)  
3.0 (1.9) all  CSS 2.1 values no   
Opera 7.0 all  CSS 2.1 values yes
Safari | Chrome | WebKit 1.0 | 1.0 | 85 all  CSS 2.1 values not before inline-elements
5.0 | 4.0 | 532.5 all  CSS 2.1 values yes

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
           
           
           
           
           
           
           
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Specifications

See also

{{ Cssxref("visibility") }}, {{ Cssxref("float") }}, {{ Cssxref("position") }}

{{ languages( { "de": "de/CSS/display", "es": "es/CSS/display", "fr": "fr/CSS/display", "pl": "pl/CSS/display", "pt": "pt/CSS/display", "zh-cn": "cn/CSS/display" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> display </code>CSS property specifies the type of rendering box used for an element. In HTML, default<code> display </code>property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is<code> inline</code>.</p>
<p>In addition to the many different display box types, the value<code> none </code>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.</p>
<ul> <li>{{ Xref_cssinitial() }}:<code> inline</code></li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified, except for root element, <a href="/en/CSS/float" title="en/CSS/float">floated</a> elements, and <a href="/en/CSS/position" title="en/CSS/position">absolutely positioned</a> elements</li>
</ul>
<h3>Syntax</h3>
<pre class="eval">display:  &lt;display-value&gt; | {{ Cssxref("inherit") }}</pre>
<h3>Values</h3>
<p><strong>&lt;display-value&gt;</strong> can be any of the following values:</p>
<dl> <dt>none</dt> <dd>Turns off the display of an element (it has no effect on layout); all child elements also have their display turned off. The document is rendered as though the element did not exist. <br> To render an element box's dimensions, yet have its contents be invisible, see the {{ cssxref("visibility") }} property.</dd> <dt>inline</dt> <dd>The element generates one or more inline element boxes.</dd> <dt>block</dt> <dd>The element generates a block element box.</dd> <dt>inline-block {{ gecko_minversion_inline("1.9") }}</dt> <dd>Introduced in CSS 2.1. The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).</dd> <dt>list-item</dt> <dd>The element generates a block box for the content and a separate list-item inline box.</dd> <dt>compact</dt> <dd>Unsupported, dropped from the CSS 2.1 standard.</dd> <dt>run-in</dt> <dd>Dropped from the final CSS 2.1 standard (but may be in CSS 3), but supported by other browsers.<br> {{ unimplemented_inline("2056") }} in Gecko/Firefox <ol> <li>If the<code> run-in </code>box contains a block box, same as<code> block</code>.</li> <li>If a block box follows the<code> run-in </code>box, the<code> run-in </code>box becomes the first inline box of the block box.</li> <li>If a inline box follows, the<code> run-in </code>box becomes a<code> block </code>box.</li> </ol> </dd> <dt>table</dt> <dd>Behaves like the<code> &lt;table&gt; </code>HTML element.</dd> <dt>inline-table {{ Fx_minversion_inline("3") }}</dt> <dd>The<code> inline-table </code>value does not have a direct mapping in HTML.</dd> <dt>table-caption</dt> <dd>Behaves like the<code> &lt;caption&gt; </code>HTML element.</dd> <dt>table-column | table-column-group</dt> <dd>These elements behave like the corresponding<code> &lt;col&gt; </code>and<code> &lt;colgroup&gt; </code>HTML elements.</dd> <dt>table-header-group | table-row-group | table-footer-group</dt> <dd>These elements behave like the corresponding<code> &lt;thead&gt; | &lt;tbody&gt; | &lt;tfoot&gt; </code>HTML elements.</dd> <dt>table-row</dt> <dd>Behaves like the<code> &lt;tr&gt; </code>HTML element.</dd> <dt>table-cell</dt> <dd>Behaves like the<code> &lt;td&gt; </code>HTML element.</dd>
</dl>
<h4>Mozilla Extensions</h4>
<p>These<code> display </code>values are not intended for use in web content. [fixme: needs update]</p>
<dl> <dt>-moz-inline-block {{ obsolete_inline() }}</dt> <dd>Never supported reliably.</dd> <dt>-moz-inline-table {{ obsolete_inline() }}</dt> <dd>Never supported.</dd> <dt>-moz-box</dt> <dd>Child elements are laid out horizontally or vertically (based on the value of the {{ cssxref("-moz-box-orient") }} property).</dd> <dt>-moz-inline-box</dt> <dd> </dd><dt>-moz-groupbox</dt> <dd> </dd><dt>-moz-grid</dt> <dd> </dd><dt>-moz-inline-grid</dt> <dd>Child elements are laid out as a XUL {{ xulelem("grid") }}.</dd> <dt>-moz-grid-group</dt> <dd>Child elements are laid out as a group of grid columns or rows. This is the layout used by the rows and columns elements. You can use the orientation (<code>-moz-box-orient</code>) to set which direction. Rows would normally have vertical orientation and columns would have a horizontal orientation.</dd> <dt>-moz-grid-line</dt> <dd>Child elements are laid out as a single column or row of a grid. You can use the orientation (<code>-moz-box-orient</code>) to set which direction.</dd> <dt>-moz-stack</dt> <dd>Child elements are laid out one on top of each other like the XUL {{ xulelem("stack") }} element.</dd> <dt>-moz-inline-stack</dt> <dd>Child elements, including<code> inline-block, block</code>, and<code> -moz-inline-stack </code>are laid out atop one another.</dd> <dt>-moz-deck</dt> <dd>Child elements are laid out one on top of each other like the XUL {{ xulelem("deck") }} element. Unlike a stack, only the top element is displayed.</dd> <dt>-moz-popup</dt> <dd> </dd><dt>-moz-marker</dt> <dd>
</dd></dl>
<h3>Examples</h3>
<p>{{ CSSRefExampleLink("display") }}</p>
<pre>p.secret  { display: none }
&lt;p style="display:none"&gt; invisible text &lt;/p&gt;
</pre>
<h3>Notes</h3>
<h4 style="margin: 1ex 0pt;">"Block" versus "in-line" elements</h4>
<ul> <li><strong>Block-level elements</strong> create vertically distinct blocks of content - generally using a line-break before and after the content. Only this value for the<code> display </code>is allowed to generate a positioned element. Block behavior is exhibited by such HTML elements as <code>&lt;p&gt;</code>, <code>&lt;div&gt;,</code> <code>&lt;blockquote&gt;</code> or <code>&lt;h1&gt;</code>.<code> display </code>property values creating a block element type:<code> block</code>,<code> list-item</code>,<code> table</code>,<code> compact </code>and<code> run-in</code>.</li>
</ul>
<ul> <li><strong>In-line elements</strong> 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.<code> display </code>property values creating an in-line element type:<code> inline</code>,<code> inline-block, inline-table</code><code> </code>and<code> run-in</code>.</li>
</ul>
<p>{{ h3_gecko_minversion("XBL bindings and display:none", "2.0") }}</p>
<p>Starting in Gecko 2.0 {{geckoRelease("2.0"), XBL bindings are no longer attached to elements when in subtrees of the DOM styled with<code> display: none </code>when they're first accessed from JavaScript, unless the elements in question are <a href="/en/XUL" title="en/XUL">XUL</a>.</p>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> <th>Support of</th> <th><code>run-in </code>support</th> </tr> <tr> <td rowspan="4">Internet Explorer</td> <td>4.0</td> <td><code>none | inline | block </code></td> <td> </td> </tr> <tr> <td>5.5 (- 7.0)</td> <td><code>inline-block </code>(natural inline elements only)</td> <td> </td> </tr> <tr> <td>6.0</td> <td><code>list-item</code></td> <td> </td> </tr> <tr> <td><strong>8.0</strong></td> <td>all CSS 2.1 values</td> <td>yes</td> </tr> <tr> <td rowspan="2">Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td>(except<code> run-in, inline-block, inline-table</code>)</td> <td> </td> </tr> <tr> <td><strong>3.0</strong> (1.9)</td> <td>all  CSS 2.1 values</td> <td>no   </td> </tr> <tr> <td>Opera</td> <td><strong>7.0</strong></td> <td>all  CSS 2.1 values</td> <td>yes</td> </tr> <tr> <td rowspan="2">Safari | Chrome | WebKit</td> <td>1.0 | 1.0 | 85</td> <td>all  CSS 2.1 values</td> <td>not before inline-elements</td> </tr> <tr> <td>5.0 | 4.0 | 532.5</td> <td>all  CSS 2.1 values</td> <td>yes</td> </tr> </tbody>
</table>
<h3 name="Browser_Compatibility">Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody>
</table>
</div>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop">CSS 2.1 Visual formatting #display</a></li>
</ul>
<h3>See also</h3>
<p>{{ Cssxref("visibility") }}, {{ Cssxref("float") }}, {{ Cssxref("position") }}</p>
<p>{{ languages( { "de": "de/CSS/display", "es": "es/CSS/display", "fr": "fr/CSS/display", "pl": "pl/CSS/display", "pt": "pt/CSS/display", "zh-cn": "cn/CSS/display" } ) }}</p>
Revert to this revision