CSS display Property

Description

The CSS property display defines how an element is presented in the document’s layout: it determines what kind of box the element generates, whether that box participates in the normal flow, and how that element interacts with its siblings and children. At a conceptual level, display is the switch that selects a layout model for an element — which in turn governs how its content is laid out, whether it establishes a new formatting context, and whether anonymous boxes or wrappers are created around children. Because it controls the element’s outer box type and how children are rendered, changing display often has broader visual and structural consequences than changing many other properties.

The behavior of an element set by display also intersects with other layout mechanisms: for example, it combines with the element’s position to determine whether it participates in normal flow or becomes positioned independently, and it affects how floats created with float interact with neighboring boxes. When an element establishes a new formatting context, it can isolate or change how children are laid out relative to outside elements; this is why altering display can change not only the element itself but also cascade into repositioning and rewrapping of nearby content.

Practical layout and rendering considerations also flow from the choice of display. It influences overflow handling and clipping behavior, so it works closely with overflow when content exceeds available space; it also affects visibility, painting order and hit testing alongside visibility and stacking properties like z-index. Because changing an element’s display type can trigger reflow and repaints, it has performance implications for dynamic updates and animations; developers often choose display values that minimize layout churn when toggling UI state or animating pieces of the page.

For authors, think of display as the foundational choice that determines an element’s role in the document’s box tree. Selecting the appropriate display behavior leads to more predictable composition of layout, clearer interaction with other CSS mechanisms, and fewer surprises when combining styles. When restructuring or debugging layout issues, inspecting the element’s computed display is usually one of the first steps to understanding why content wraps, overlaps, or behaves differently than expected.

Definition

Initial value: inline
Applies to: All elements
Inherited: No
Computed value: Specified value, except for floats, root elements and positioned elements
Animatable: No
JavaScript syntax: object.style.display

Interactive Demo

One

Two

Three

Syntax

display: 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

Values

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.

Example

HTML

<div class='wrapper'>

  <h2>CSS display examples</h2>

  <div class='examples'>

    <div class='box block'>Block element (div)  -  display: block</div>

    <span class='box inline'>Inline element (span)  -  display: inline</span>

    <div class='box inline-block'>Inline-block element  -  display: inline-block</div>

    <div class='flex-container'>

      <div class='flex-item'>Flex 1</div>

      <div class='flex-item'>Flex 2</div>

      <div class='flex-item'>Flex 3</div>

    </div>

    <div class='grid-container'>

      <div class='grid-item'>1</div>

      <div class='grid-item'>2</div>

      <div class='grid-item'>3</div>

      <div class='grid-item'>4</div>

    </div>

    <div class='box none'>Hidden element  -  display: none</div>

  </div>

</div>

CSS

/* Basic page */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  padding: 20px;
  background: #f7f9fc;
  color: #111827;
}

.wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.examples {
  display: grid;
  gap: 12px;
}

.box {
  padding: 12px 16px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e6e9ef;
}

.block {
  display: block;
}

.inline {
  display: inline;
  background: #eef2ff;
  margin-left: 8px;
}

.inline-block {
  display: inline-block;
  width: 180px;
  vertical-align: middle;
}

.flex-container {
  display: flex;
  gap: 10px;
}

.flex-item {
  flex: 1 1 0;
  padding: 12px;
  background: #fff7ed;
  border: 1px solid #fde3c5;
  text-align: center;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.grid-item {
  padding: 12px;
  background: #ecfdf5;
  border: 1px solid #d1fae5;
  text-align: center;
}

.none {
  display: none;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS display property. Hover over a browser icon to see the version that first introduced support for this CSS property.