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.

Value	Description
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.
flex	Displays elements as block-level flexible box models.
flow-root	Displays elements as block-level elements and establishes a new block formatting context for the selected node's content.
grid	Displays elements as block-level grid boxes.
inherit	Displays an element with its parent element's display value.
initial	Displays 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-flex	Displays elements as inline-level flexible box models.
inline-grid	Displays 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.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Join CodeSweetly Newsletter