References

Beginner-friendly references for web development, with live, editable examples.

The CSS display property

Property CSS All modern browsers Updated
Quick answer

The CSS display property decides what kind of box an element makes and how its children flow. The everyday values are block (starts a new line, full width), inline (sits within text), inline-block (inline but sizable), flex and grid (modern layout containers), and none (removes the element completely).

Overview

If you had to learn one layout property, this is it. display sets the box an element generates and, just as importantly, how it arranges whatever is inside it.

The classic values describe an element's relationship to the text around it. A block element — a <div>, <p> or <section> — starts on its own line and stretches to the full width it can. An inline element — a <span> or <a> — flows along inside a line of text and only takes the width of its content; setting a width or top margin on it does nothing. inline-block is the useful middle ground: it sits inline but lets you size it like a block.

The two values that changed CSS layout for good are flex and grid. Both turn the element into a container and lay its direct children out for you — Flexbox in one direction (a row or a column), Grid in two (rows and columns at once). And display: none is the off switch: the element disappears from the layout and from the accessibility tree, as if it were never written.

Syntax

selector {
  display: value;
}

/* e.g. a horizontal flex row */
.toolbar {
  display: flex;
  gap: 12px;
}

Values

The display property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value Description
block Starts on a new line and takes the full available width (div, p, section).
inline Flows within text and is only as wide as its content (span, a). Width and vertical margins are ignored.
inline-block Flows inline, but you can set width, height, margins and padding on it.
flex Makes the element a flex container, arranging its children in a row or column.
grid Makes the element a grid container for two-dimensional row-and-column layouts.
none Removes the element entirely — no box, no space, hidden from screen readers.
contents Drops the element's own box but keeps its children, as if it were unwrapped.

Examples

Live example 
<style>
  .row {
    display: flex;
    gap: 10px;
  }
  .row span {
    background: #1c7ce9;
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font: 600 15px system-ui, sans-serif;
  }
</style>
<div class="row">
  <span>One</span>
  <span>Two</span>
  <span>Three</span>
</div>

Example #2

Live example 
<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .grid div {
    background: #eef2ff;
    color: #3730a3;
    padding: 18px;
    text-align: center;
    border-radius: 8px;
    font: 600 15px system-ui, sans-serif;
  }
</style>
<div class="grid">
  <div>A</div><div>B</div><div>C</div>
  <div>D</div><div>E</div><div>F</div>
</div>

Best practices

  • Reach for display: flex when you are aligning things in one direction, and display: grid when you need rows and columns together. They have replaced floats for layout.
  • Prefer gap over margins to space out flex and grid children — it only adds space between items, never around the edges.
  • Remember that display: none hides content from screen readers too. To hide something visually but keep it for assistive tech, use a visually-hidden utility class instead.
  • Avoid switching a focused element to display: none; moving focus to a removed element traps keyboard users. Manage focus when you toggle visibility.

Accessibility

display: none removes an element from both the visual layout and the accessibility tree, so screen readers skip it entirely. That is exactly what you want for genuinely hidden content, and exactly what you do not want for text that should still be announced.

Two values can subtly change meaning. Setting display to flex, grid or block on a table element, or display: contents on a semantic element, has in some browsers stripped the element's role from the accessibility tree. Test with a screen reader when you change the display type of lists, tables or buttons, and keep the visual order matching the DOM order so keyboard navigation stays logical.

Frequently asked questions

What is the difference between block and inline in CSS?
A block element starts on a new line and fills the available width; an inline element flows within a line of text and ignores width and vertical margins. inline-block flows inline but can be sized like a block.
How do I center something with display?
Make the parent display: flex, then add justify-content: center and align-items: center. That centers the children both horizontally and vertically.
What is the difference between display: none and visibility: hidden?
display: none removes the element completely — it takes no space and is hidden from screen readers. visibility: hidden hides it but keeps its space reserved in the layout.
When should I use flex versus grid?
Use flex for one-dimensional layouts (a row or a column of items) and grid when you are positioning content across rows and columns at the same time. Many layouts use both.
Why does width not work on my inline element?
Inline elements ignore width, height and top/bottom margins. Switch it to inline-block or block if you need to size it.
cursor filter