CSS display property

Property values

block

The element behaves as block-level element.

display: block;

inline

The element behaves as inline-level element.

display: inline;

table

The element behaves as table (<table> </table>) element.

display: table;

flex

The element represents a flex container and constitutes all the flex properties.

display: flex;

grid

The element represents a grid structure.

display: grid;

table-row-group

In this case, the content that overflows vertically out of the box becomes invisible.

display: table-row-group;

table-header-group

In this case, the content that overflows vertically out of the box becomes invisible.

display: table-header-group;

table-footer-group

In this case, the content that overflows vertically out of the box becomes invisible.

display: table-footer-group;

table-row

The element represents a table-row element (<tr>)

display: table-row;

table-cell

The element represents a table-cell element (<td>)

display: table-cell;

table-column-group

The element represents a table-column-group (<colgroup/> <colgroup/>).

display: table-column-group;

table-column

The element represents a table-column-group (<col/> <col/>).

display: table-column;

table-caption

It behaves the same way as caption element (<caption>).

display: table-caption;

none

It does not display the element.

display: none;

inline-block

It behaves as block-level element but floating on the same line (if space available).

display: inline-block;

inline-table

It behaves as table element but floating on the same line (if space available).

display: inline-table;

inline-flex

It behaves as flex container but floating on the same line (if space available).

display: inline-flex;

inline-grid

It behaves as grid container but floating on the same line (if space available).

display: inline-grid;