css.properties

display

The display property specifies how an element is displayed in the layout.

Formal Syntax

display = [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> | grid-lanes | inline-grid-lanes | <display-outside> || [ <display-inside> | math ] <display-outside> = block | inline | run-in <display-inside> = flow | flow-root | table | flex | grid | ruby <display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item <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 <display-box> = contents | none <display-legacy> = inline-block | inline-table | inline-flex | inline-grid
Initial value
inline
Applies to
all elements
Inherited
no
Percentages
n/a
Computed value
a pair of keywords representing the inner and outer display types plus optional list-item flag, or a or keyword; see prose in a variety of specs for computation rules
Animation type
see § 2.9 Animating and Interpolating display

See specification

Browser Support

standard | MDN · Spec · Spec

FeatureChromeFirefoxSafariEdge
display11112
block11112
contents653711.179
flex2920912
flow-root58531379
grid575210.116
inline11112
inline-block11112
inline-flex2920912
inline-grid575210.116
inline-table13112
is_transitionable117—18117
keyframe_animatable116—18116
list-item11112
math109——109
multi-keyword_values1157015115
none11112
ruby12138—12
ruby-base—38—12
ruby-base-container—38—12
ruby-text12138—12
ruby-text-container—38—12
table11112
table-caption11≤4≤15
table-cell11112
table-column11112
table-column-group11112
table-footer-group11112
table-header-group11112
table-row11112
table-row-group11112

Related Properties