CSS's Display property specifies how the components (div, hyperlink, heading, etc.) will be placed on the web page. This property, as the name implies, is used to define how different parts of a web page are displayed.
Displays an element as an inline element. Any height or width properties will be ignored.
block
Displays an element as a block element. It begins on a new line and spans the entire width.
contents
The container is removed, and the child elements of the element at the next level up in the DOM are replaced.
flex
An element is displayed as a block-level flex container.
grid
An element is displayed as a block-level grid container.
inline-block
An element is displayed as an inline-level block container. The element is formatted as an inline element, but height and width values can be specified.
inline-flex
An element is displayed as an inline-level flex container.
inline-grid
An element is displayed as an inline-level grid container.
inline-table
The element is displayed as a table at the inline level.
list-item
Allow the element to behave similarly to a <li> element.
run-in
Depending on the context, displays an element as a block or inline.
table
Allow the element to behave similarly to a <table> element.
table-caption
Allow the element to behave similarly to a <caption> element.
table-column-group
Allow the element to behave similarly to a <colgroup> element.
table-header-group
Allow the element to behave similarly to a <thead> element.
table-footer-group
Allow the element to behave similarly to a <tfoot> element.
table-row-group
Allow the element to behave similarly to a <tbody> element.
table-cell
Allow the element to behave similarly to a <td> element.
table-column
Allow the element to behave similarly to a <col> element.
table-row
Allow the element to behave similarly to a <tr> element.
none
The element has been completely eliminated.
initial
This property is set to its default value.
inherit
This property is inherited from its parent element.