display

display determines whether an element generates a box, how that box participates in its surroundings, and how its children are laid out. Changing display does not change the element’s HTML meaning.

Compare inline and inline-block

Both spans remain in the text line. Only the inline-block span uses the declared width and height; an ordinary non-replaced inline span does not.

<p>Before <span class="sample inline">inline</span> after.</p>
<p>Before <span class="sample atomic">inline-block</span> after.</p>

.sample {
  width: 8rem;
  height: 3rem;
  background: #dbeafe;
}
.inline {
  display: inline;
}
.atomic {
  display: inline-block;
}

A row that can wrap

Flex supplies the inner layout. Its block outer display makes the container occupy its own line; inline-flex would instead participate as an inline-level box.

<div class="actions">
  <button type="button" onclick="this.textContent='Saved'">Save</button
  ><button type="button" onclick="this.textContent='Copied'">Copy</button
  ><button type="button" onclick="this.textContent='Ready to share'">
    Share
  </button>
</div>

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
button {
  padding: 0.75rem;
  min-height: 44px;
}

Useful values and defaults

The initial value is inline; browser styles give many HTML elements other values. Display is not inherited. Block and inline describe the outer box. Flex and grid describe inner layout, with a block outer box by default. Inline-block corresponds to inline flow-root; flow-root establishes a new block formatting context, useful for containing floats without clipping.

display:none removes the box and descendants from layout and normally from the accessibility tree. Referenced hidden text can still contribute to an accessible name. It is unsuitable for visually hiding a label that must remain available to assistive technology.

display:contents removes the element’s own box while keeping child boxes. Accessibility bugs can affect its semantics; test the actual element and browser before using it on meaningful landmarks or controls.

Common mistakes

Width and height restrictions on inline text do not apply identically to replaced elements such as images. Flex and Grid affect direct children, not every descendant. Modern layout values have their own compatibility histories; old Internet Explorer support is not equivalent to current Grid or Flexbox behavior.

Learn Flexbox vs. Grid, float, and visibility next.

Sources and browser support

MDN: display describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.