CSS display Property

Example

Use of some different display values:

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

Definition and Usage

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

Display behavior : It means that how an element will be displayed to the user. e.g. like a grid, like a table, like a block, like inline etc.

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.
Version:	CSS1
JavaScript syntax:	object.style.display="none"

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which display is applied.
• Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

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
block	Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width
contents	Makes the container disappear, making the child elements children of the element the next level up in the DOM
flex	Displays an element as a block-level flex container
grid	Displays an element as a block-level grid container
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
inline-flex	Displays an element as an inline-level flex container
inline-grid	Displays an element as an inline-level grid container
inline-table	The element is displayed as an inline-level table
list-item	Let the element behave like a <li> element
run-in	Displays an element as either block or inline, depending on context
table	Let the element behave like a <table> element
table-caption	Let the element behave like a <caption> element
table-column-group	Let the element behave like a <colgroup> element
table-header-group	Let the element behave like a <thead> element
table-footer-group	Let the element behave like a <tfoot> element
table-row-group	Let the element behave like a <tbody> element
table-cell	Let the element behave like a <td> element
table-column	Let the element behave like a <col> element
table-row	Let the element behave like a <tr> element
none	The element is completely removed
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

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 darkblue;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}

.b {
  border: 2px solid blue;
  background-color: lightblue;
  padding: 10px;
}

Example

A demonstration of how to use the inherit property value:

body {
  display: inline;
}

p {
  display: inherit;
}

Example

Set the direction of some flexible items inside a <div> element in reverse order:

div {
  display: flex;
  flex-direction: row-reverse;
}