display

The display property designates the type of rendering box of an element.

Syntax

Examples:

div.one {
  display: none;
}

div.one {
  display: inline;
}

div.one {
  display: inline-block;
}

div.one {
  display: block;
}

Values

inline
The element is displayed inline with height and width properties having no effect.

block
The element is displayed as a block, starting on a new line and taking the full width.

contents
The containing element disappears and makes the child elements children of the next ancestor element.

flex
The element is displayed as a block-level flex container.

grid
The element is displayed as a block-level grid container.

inline-block
The element is displayed as an inline-level block container, for which you can apply height and width values.

inline-flex
The element is displayed as an inline-level flex container.

inline-grid
The element is displayed as an inline-level grid container.

inline-table
The element is displayed as an inline-level table container.

list-item
The element behaves like a <li> element.

run-in
The element is displayed as either inline or block, depending upon the context.

table
The element behaves like a <table> element.

table-caption
The element behaves like a <caption> element.

table-column-group
The element behaves like a <colgroup> element.

table-header-group
The element behaves like a <thead> element.

table-footer-group
The element behaves like a <tfoot> element.

table-row-group
The element behaves like a <tbody> element.

table-cell
The element behaves like a <td> element.

table-column
The element behaves like a <col> element.

table-row
The element behaves like a <tr> element.

none
The element does not display.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of display? Submit a codepen.io demo and we'll showcase it here ↴