display

The display property specifies how/if an element is displayed on the canvas.

Syntax

display: inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
Initial: inline
Applies To: all elements
Inherited: no
Percentages: NA
Media: all

Values

display: value
Value Description
block Generates a block box
flex Causes an element to generate a block-level flex container box
inline Generates one or more inline boxes
inline-block Generates a block box which is flowed as a single inline box
inline-flex Causes an element to generate an inline-level flex container box
inline-table Behaves like an inline table element
list-item Generate a principal block box and a list-item inline box
none Generate no box
run-in Generates either block or inline boxes depending on context
table Behaves like a table element
table-caption Behaves like a caption element
table-cell Behaves like a td element
table-column Behaves like a col element
table-column-group Behaves like a colgroup element
table-footer-group Behaves like a tfoot element
table-header-group Behaves like a thead element
table-row Behaves like a tr element
table-row-group Behaves like a tbody element

DOM

[window.]document.getElementById("element-id").style.display = "display";

Example | block

Example | flex

Example | inline

Example | inline-block

Example | inline-flex

Example | inline-table

Example | list-item

Example | none

Example | run-in

Example | table

Example | table-caption

Example | table-cell

Example | table-column

Example | table-column-group

Example | table-header-group

Example | table-row

Example | table-row-group

Example | DOM | 1

Example | DOM | 2

Example | DOM | 3

Example | DOM | 4

External

W3C Cascading Style Sheets, level 1

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

W3C CSS Flexible Box Layout Module Level 1