The display property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline.

  • Initial valueinline
  • Applies toAll elements
  • InheritedNo
  • MediaAll
  • Computed valueSpecified value, except for floats, root elements and positioned elements
  • AnimatableNo
  • CSS VersionCSS1, CSS2, CSS3
  • JavaScript
Formal syntax: inline | block | inline-block | list-item | run-in | compact | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | none

display: [value];
  • inlineThe element generates one or more inline element boxes.
  • blockThe element generates a block element box.
  • inline-blockThe element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)
  • list-itemThe element generates a block box for the content and a separate list-item inline box.
  • run-inEither one or more block-level, block container boxes, or one or more inline-level, inline container boxes, depending on context
  • compactEither one or more block-level, block container boxes or a single marker box, depending on context
  • marker
  • tableSee the Tables module
  • inline-tableSee the Tables module
  • table-row-groupSee the Tables module
  • table-header-groupSee the Tables module
  • table-footer-groupSee the Tables module
  • table-rowSee the Tables module
  • table-column-groupSee the Tables module
  • table-columnSee the Tables module
  • table-cellSee the Tables module
  • table-captionSee the Tables module
  • rubySee the Ruby module
  • ruby-baseSee the Ruby module
  • ruby-textSee the Ruby module
  • ruby-base-groupSee the Ruby module
  • ruby-text-groupSee the Ruby module
  • flexGenerates a block element for laying out content in the flexbox model. This is a flexbox model value in CSS3.
  • inline-flexGenerates an inline element for laying out content in the flexbox model. This is a flexbox model value in CSS3.
  • noneTurns off the display of an element (it has no effect on layout); all descendant elements also have their display turned off. The document is rendered as though the element did not exist.
.class {
   display: block;

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.