CSS display property

Description

CSS display property changes the behavior of element.

Syntax

display : block | inline | table | flex | grid | table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | none | inline-block | inline-table | inline-flex | inline-grid

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;

Applicable to

It applies to multi-column container.


#CSS digger
Was this article helpful?

 
CSS display property changes the behavior of element.
×

Ctrl+D