Skip to main content

CSS display Property Explained – Block, Inline, Flex, and Grid

A CSS display property specifies how browsers should display an HTML element.

Syntax of a display Property

html-element {
display: value;
}

Let's discuss the values you can assign a CSS display property.

CSS display Property's Values

Below are some of the values a display property accepts.

ValueDescription
block

Displays elements as block box models.

note

Most browsers set the <div> element's display value to block by default—this is why multiple <div> elements typically sit on different lines.

flexDisplays elements as block-level flexible box models.
flow-rootDisplays elements as block-level elements and establishes a new block formatting context for the selected node's content.
gridDisplays elements as block-level grid boxes.
inheritDisplays an element with its parent element's display value.
initialDisplays an element with its default display value.
inline

Displays elements as inline box models.

note
  • A <span> element's display value is inline by default—this is why multiple <span> elements typically sit on the same line.
  • The height and width CSS properties do not work on inline elements. You can use inline-block instead.
inline-block

Displays elements as inline-level block boxes.

note

The height and width properties work with the inline-block value.

inline-flexDisplays elements as inline-level flexible box models.
inline-gridDisplays elements as inline-level grid boxes.
inline-table

Displays elements as inline-level box models that behave like HTML <table>s.

none

Removes an element entirely from the page layout.

tip

Use the visibility property if you only wish to hide the element.

table

Displays elements as block-level box models that behave like HTML <table>s.

table-caption

Displays elements that behave like HTML <caption>s.

table-cell

Displays elements that behave like HTML <td>s.

table-column

Displays elements that behave like HTML <col>s.

table-column-group

Displays elements that behave like HTML <colgroup>s.

table-footer-group

Displays elements that behave like HTML <tfoot>s.

table-header-group

Displays elements that behave like HTML <thead>s.

table-row

Displays elements that behave like HTML <tr>s.

table-row-group

Displays elements that behave like HTML <tbody>s.

info

HTML tables are best for tabular data—not page layout. In other words, tables are not ideal for laying out modern web pages. Therefore, use the display: table CSS declaration only as a legacy tool for old browsers lacking support for modern layout tools like Flexbox and Grid.

Overview

This article discussed what a CSS display property is. We also discussed some of its widely used values.