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

tableDisplays elements as block-level box models that behave like HTML tables.
table-captionDisplays elements that behave like HTML captions.
table-cellDisplays elements that behave like HTML tds.
table-columnDisplays elements that behave like HTML cols.
table-column-groupDisplays elements that behave like HTML colgroups.
table-footer-groupDisplays elements that behave like HTML tfoots.
table-header-groupDisplays elements that behave like HTML theads.
table-rowDisplays elements that behave like HTML trs.
table-row-groupDisplays 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.

Join CodeSweetly's Newsletter