CSS display attribute

Definition and Usage

The display property specifies the type of box to be generated by the element.

Description

This property is used to define the type of display box generated by the element when the layout is established. For document types such as HTML, using display incautiously can be dangerous because it may violate the display hierarchy already defined in HTML. For XML, since XML does not have an inherent such hierarchy, all display is absolutely necessary.

Note:In CSS2, there were values 'compact' and 'marker', but due to lack of widespread support, they have been removed from CSS2.1.

See also:

CSS Tutorial:CSS Positioning

HTML DOM Reference Manual:display property

Example

To make the paragraph generate an inline box:

p.inline
  {
  display:inline;
  }

Try It Yourself

CSS Syntax

display: value;

Attribute value

Value Description
none This element will not be displayed.
block This element will be displayed as a block-level element, with line breaks before and after the element.
inline Default. This element will be displayed as an inline element, without line breaks before or after the element.
inline-block Inline-block element. (A value added in CSS2.1)
list-item This element will be displayed as a list.
run-in This element will be displayed as a block-level element or an inline element depending on the context.
compact The value 'compact' exists in CSS, but due to lack of widespread support, it has been removed from CSS2.1.
marker There is a value called marker in CSS, but due to lack of widespread support, it has been removed from CSS2.1.
table This element will be displayed as a block-level table (similar to <table>), with line breaks before and after the table.
inline-table This element will be displayed as an inline table (similar to <table>), with no line breaks before or after the table.
table-row-group This element will be displayed as a group of one or more rows (similar to <tbody>).
table-header-group This element will be displayed as a group of one or more rows (similar to <thead>).
table-footer-group This element will be displayed as a group of one or more rows (similar to <tfoot>).
table-row This element will be displayed as a table row (similar to <tr>).
table-column-group This element will be displayed as a group of one or more columns (similar to <colgroup>).
table-column This element will be displayed as a cell column (similar to <col>).
table-cell This element will be displayed as a table cell (similar to <td> and <th>).
table-caption This element will be displayed as a table caption (similar to <caption>).
inherit It is specified that the value of the display property should be inherited from the parent element.

Technical Details

Default Value: inline
Inheritance: no
Version: CSS1
JavaScript Syntax: object.style.display="inline"

TIY Example

How to display an element as an inline element
This example demonstrates how to display an element as an inline element.
How to display an element as a block-level element
This example demonstrates how to display an element as a block-level element.

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 3.0 3.1 7.0

Note:If !DOCTYPE is specified, Internet Explorer 8 (and higher versions) support property values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit".