CSS displayProperty

Example

Setting different display property values:

p.ex1 {display: none;} p.ex2 {display: inline;} p.ex3 {display: block;} p.ex4 {display: inline-block;}

Attribute definition and usage instructions

The display property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid layout, or flex layout.

Formally, the display property sets the inner and outer display types of an element.

Default value:	inline
Inherited:	no
version:	CSS1
JavaScript Syntax:	object.style.display="inline"

/* Preset Values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* Generate box */
display: none;
display: contents;

/* Syntax for two values */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/* Other Values */
display: table;
display: table-row; /* All table elements have a value equivalent to the CSS display property */
display: list-item;

/* Global Values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

Browser Support

Numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -ms-, or -moz- specify the first browser version that supported the prefixed property.

Property
display	4.0	8.0 Partial from 5.5	3.0	3.1	7.0

Property 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 it.
inline	Default. This element will be displayed as an inline element, with no line breaks before or after it.
inline-block	Inline-block element. (New value in CSS2.1)
list-item	This element will be displayed as a list.
run-in	This element will be displayed as a block-level or inline element depending on the context.
compact	The value compact exists in CSS, but was removed from CSS2.1 due to lack of widespread support.
marker	The value marker exists in CSS, but was removed from CSS2.1 due to lack of widespread support.
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 grouping of one or more rows (similar to <tbody>).
table-header-group	This element will be displayed as a grouping of one or more rows (similar to <thead>).
table-footer-group	This element will be displayed as a grouping of one or more rows (similar to <tfoot>).
flow-root	Generates a block-level element box that establishes a new block formatting context, defining the root element of the formatting context.
table-row	This element will be displayed as a table row (similar to <tr>).
table-column-group	This element will be displayed as a grouping of one or more columns (similar to <colgroup>).
table-column	This element will be displayed as a column of cells (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	Specifies that the value of the display property should be inherited from the parent element.

More Examples

Example

Settingsdisplay: contents;display:

.a { display: contents; border: 2px solid red; background-color: #ccc; padding: 10px; width: 200px; } .b { border: 2px solid blue; background-color: lightblue; padding: 10px; }

Try it Yourself »