The display CSS property defines an element's display type.
Syntax
CSS
display: value;
JS
object.style.display = "value";
Values
<'display'> = [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>
<display-outside> = block | inline | run-in
block
Generates a box that is block-level when placed in flow layout.
inline
Generates a box that is inline-level when placed in flow layout.
run-in
Generates an run-in box, which is a type of inline-level box with special behavior that attempts to merge it into a subsequent block container.
<display-inside> = flow | flow-root | table | flex | grid | ruby
flow
Lays out its contents using flow layout.
flow-root
Generates a block container box and lays out its contents using flow layout.
table
Generates a principal table wrapper box that establishes a block formatting context and which contains an additionally-generated table grid box that establishes a table formatting context.
flex
Generates a principal flex container box and establishes a flex formatting context.
grid
Generates a principal grid container box and establishes a grid formatting context.
ruby
Generates a ruby container box and establishes a ruby formatting context in addition to integrating its base-level contents into its parent formatting context if it is inline or generating a wrapper box of the appropriate outer display type if it is not inline.
<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item
<display-outside> = block | inline | run-in
block
Generates a box that is block-level when placed in flow layout.
inline
Generates a box that is inline-level when placed in flow layout.
run-in
Generates an run-in box, which is a type of inline-level box with special behavior that attempts to merge it into a subsequent block container.
flow
Lays out its contents using flow layout.
flow-root
Generates a block container box and lays out its contents using flow layout.
list-item
Generates a ::marker pseudo-element with the content specified by its list-style properties together with a principal box of the specified type for its own contents.
<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
table-row-group
Behaves as a tbody element.
table-header-group
Behaves as a thead element.
table-footer-group
Behaves as a tfoot element.
table-row
Behaves as a tr element.
table-cell
Behaves as a td element.
table-column-group
Behaves as a colgroup element.
table-column
Behaves as a col element.
table-caption
Behaves as a caption element.
ruby-base
Behaves as a rb element.
ruby-text
Behaves as a rt element.
ruby-base-container
Behaves as a rbc element.
ruby-text-container
Behaves as a rtc element.
<display-box> = contents | none
contents
Does not generate any boxes itself, but its children and pseudo-elements still generate boxes and text runs as normal.
none
Does not generate boxes or text runs.
<display-legacy> = inline-block | inline-table | inline-flex | inline-grid
inline-block
Behaves as inline flow-root.
inline-table
Behaves as inline table.
inline-flex
Behaves as inline flex.
inline-grid
Behaves as inline grid.
Initial
inline
