CSS display Property

Definition and Usage

The display property sets whether an element is treated as a block or inline box, and which layout its children use — normal flow, flex, grid, or none.

Formally it sets an outer type (role in flow) and an inner type (how children lay out). Everyday keywords such as flex mean block flex. The property is not inherited.

CSS Syntax

Short form is enough for most work. Multi-keyword form also exists: display: inline flex; equals inline-flex.

Property Values

Also common: inline-flex, inline-grid, list-item, and table-related values. Start with the table above.

How to Use display

Pick the value that matches how the box should sit in the page and how its children should arrange.

1. Decide the element's role: block section, inline bit of text, or a layout container.
2. Choose a keyword: block, inline, inline-block, flex, grid, or none.
3. For flex or grid, set the container's display, then size and place the children.
4. To hide content, prefer patterns that keep accessibility when the content must still be announced.

Live Preview

Change display on the dashed box. Surrounding text shows how the box sits in flow.

CSS Examples

Each snippet focuses on display. Use Try It Yourself for a live editor.

<style>
  .chip {
    display: inline-block;
    width: 4rem;
    padding: 0.5rem;
  }
</style>

<span class="chip">A</span>
<span class="chip">B</span>

<style>
  .row {
    display: flex;
  }
</style>

<div class="row">
  <span>1</span><span>2</span><span>3</span>
</div>

<style>
  .gone {
    display: none;
  }
</style>

<p>Visible</p>
<p class="gone">Hidden</p>
<p>Also visible</p>

Key Takeaways