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 tables.

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 tables.

table-caption

Displays elements that behave like HTML captions.

table-cell

Displays elements that behave like HTML tds.

table-column

Displays elements that behave like HTML cols.

table-column-group

Displays elements that behave like HTML colgroups.

table-footer-group

Displays elements that behave like HTML tfoots.

table-header-group

Displays elements that behave like HTML theads.

table-row

Displays elements that behave like HTML trs.

table-row-group

Displays elements that behave like HTML tbodys.

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.