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 |
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
|
inline-block | Displays elements as inline-level block boxes. note The |
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 |
none | Removes an element entirely from the page layout. tip Use the |
table | Displays elements as block-level box models that behave like HTML |
table-caption | Displays elements that behave like HTML |
table-cell | Displays elements that behave like HTML |
table-column | Displays elements that behave like HTML |
table-column-group | Displays elements that behave like HTML |
table-footer-group | Displays elements that behave like HTML |
table-header-group | Displays elements that behave like HTML |
table-row | Displays elements that behave like HTML |
table-row-group | Displays elements that behave like HTML |
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.