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;}

Try it Yourself »

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.

Show demo ❯

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
Demo ❯

block
Displays an element as a block element (like <p>). It starts on a
new line, and takes up the whole width
Demo ❯

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
Demo ❯

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. Read about initial

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 »

Example

A demonstration of how to use the inherit property value:

body {
  display: inline;
}

p {
  display: inherit;
}

Try it Yourself »

Example

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

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

Try it Yourself »

Related Pages

CSS tutorial: CSS Display and
visibility

HTML DOM reference: display property