CSS display Property

❮ Previous Complete CSS Reference Next ❯

Example

Use of some different display values:

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

More "Try it Yourself" examples below.

Definition and Usage

The display property specifies the display behavior (the type of rendering box) of an element.

In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet. The default value in XML is inline, including SVG elements.

Default value:	?
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS1
JavaScript syntax:	object.style.display="none" Try it

Browser Support

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

Property
display	4.0	8.0	3.0	3.1	7.0

Note: The values "flex" and "inline-flex" requires the -webkit- prefix to work in Safari.

Note: "display: contents" does not work in Edge prior version 79.

CSS Syntax

display: value;

Property Values

Value	Description	Play it
inline	Displays an element as an inline element (like <span>). Any height and width properties will have no effect	Play it »
block	Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width	Play it »
contents	Makes the container disappear, making the child elements children of the element the next level up in the DOM	Play it »
flex	Displays an element as a block-level flex container	Play it »
grid	Displays an element as a block-level grid container	Play it »
inline-block	Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values	Play it »
inline-flex	Displays an element as an inline-level flex container	Play it »
inline-grid	Displays an element as an inline-level grid container	Play it »
inline-table	The element is displayed as an inline-level table	Play it »
list-item	Let the element behave like a <li> element	Play it »
run-in	Displays an element as either block or inline, depending on context	Play it »
table	Let the element behave like a <table> element	Play it »
table-caption	Let the element behave like a <caption> element	Play it »
table-column-group	Let the element behave like a <colgroup> element	Play it »
table-header-group	Let the element behave like a <thead> element	Play it »
table-footer-group	Let the element behave like a <tfoot> element	Play it »
table-row-group	Let the element behave like a <tbody> element	Play it »
table-cell	Let the element behave like a <td> element	Play it »
table-column	Let the element behave like a <col> element	Play it »
table-row	Let the element behave like a <tr> element	Play it »
none	The element is completely removed	Play it »
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

A demonstration of how to use the contents property value. In the following example the .a container will disappear, and making the child elements (.b) children of the element the next level up in the DOM:

.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 »