display

Determines how an element behaves in the page layout and how it lays out its children.

Initial value: inline
Inherited: No
Animatable: no, it switches instantly between values
Applies to: all elements
JavaScript: element.style.display = "flex"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.menu {
  display: flex;
  gap: 16px;
}

.menu a {
  display: inline-block;
  padding: 8px 14px;
}

Preview

Definition and usage

The display property is the foundation of every layout. It tells the browser two things: how the element behaves on the outside (does it start a new line like a block, or flow within text like an inline element) and how it lays out its children (normal flow, Flexbox, Grid).

Block elements, such as <div> or <p>, take up all the available width and start on a new line. Inline elements, such as <span> or <a>, flow within text and ignore width and height. inline-block combines both worlds: the element sits inline, but you can still give it dimensions.

The values flex and grid turn an element into a modern layout container, and none removes the element from the page entirely, including the space it used to take up.

Syntax

display: block | inline | inline-block | flex | inline-flex | grid | inline-grid | none | contents | …;

Values

inline
Elements flow inline like text. The 110px width is ignored.
block
Every element starts a new line and respects the width.
inline-block
Elements sit on a single line, but have their own width and vertical margins.
flex
The container lays out its children in a flexible row. Here the value goes on the parent.
grid
The container lays out its children in a grid. Here, three equal columns.
none
The element disappears and takes up no space. Here we hide the second element.

Value	Description
inline	Elements flow inline like text. The `110px` width is ignored.
block	Every element starts a new line and respects the width.
inline-block	Elements sit on a single line, but have their own width and vertical margins.
flex	The container lays out its children in a flexible row. Here the value goes on the parent.
grid	The container lays out its children in a grid. Here, three equal columns.
none	The element disappears and takes up no space. Here we hide the second element.

Values in practice

inline

Elements flow inline like text. The 110px width is ignored.

.item { display: inline; }

block

Every element starts a new line and respects the width.

.item { display: block; }

inline-block

Elements sit on a single line, but have their own width and vertical margins.

.item { display: inline-block; }

flex

The container lays out its children in a flexible row. Here the value goes on the parent.

.stage { display: flex; gap: 6px; }

grid

The container lays out its children in a grid. Here, three equal columns.

.stage { display: grid; grid-template-columns: repeat(3, 1fr); }
.item { width: auto; }

none

The element disappears and takes up no space. Here we hide the second element.

.item:nth-child(2) { display: none; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

If width or margin-top doesn’t work on an element, check whether it’s inline. inline-block or block will help.
To hide an element only visually, while keeping it available to screen readers, don’t use display: none.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course