Encyclopedia CSS:display

Introduction to CSS

Encyclopedia CSS:display

Understanding the CSS property display can be challenging due to its numerous possible values, each influencing the behavior and rendering of an element. This property determines how an element behaves in the document: whether it is block-level, inline, flexible, grid-based, or entirely invisible.

List of Available Values for the display Property

Here is a list of available values for the display property:

• display: -webkit-box — an outdated value for creating block layouts in Webkit-based browsers.
• display: -webkit-inline-box — similar to -webkit-box but for inline layouts in Webkit-based browsers.
• display: block — makes the element block-level, occupying the full width of its parent.
• display: contents — the element itself disappears, but its child elements remain in the DOM.
• display: flex — makes the element a flexible layout container (flexbox).
• display: flow — sets the default flow behavior (standard value for most elements).
• display: flow-root — creates a new block formatting context as if the element was a block container.
• display: grid — makes the element a grid layout container.
• display: inherit — inherits the display property value from the parent element.
• display: initial — resets the display property to its initial value.
• display: inline — makes the element inline-level, occupying only the necessary width.
• display: inline-block — combines inline and block behavior (can have dimensions but remains inline).
• display: inline-flex — makes the element an inline-level flexible container.
• display: inline-grid — makes the element an inline-level grid container.
• display: inline-masonry — experimental value for inline masonry-style layouts.
• display: inline-table — makes the element behave like an inline-level table.
• display: list-item — makes the element a list item with a marker (like <li>).
• display: masonry — experimental value for dynamic masonry-style grid layouts.
• display: math — experimental value for mathematical markup.
• display: none — hides the element from view and removes it from the document flow.
• display: revert — resets the display property to the browser's default styles.
• display: revert-layer — experimental value for reverting styles in specific layers.
• display: ruby — makes the element a container for ruby annotations (used in languages requiring furigana).
• display: ruby-text — makes the element behave as ruby text (furigana).
• display: table — makes the element behave as a block-level table.
• display: table-caption — makes the element behave as a table caption.
• display: table-cell — makes the element behave as a table cell.
• display: table-column — makes the element behave as a table column.
• display: table-column-group — makes the element behave as a group of table columns.
• display: table-footer-group — makes the element behave as a table footer group.
• display: table-header-group — makes the element behave as a table header group.
• display: table-row — makes the element behave as a table row.
• display: table-row-group — makes the element behave as a group of table rows.
• display: unset — removes the set value and returns the property to its initial or inherited state.

Each of these values serves a specific purpose, enabling flexible control over web page layout. However, due to the vast variety of options, choosing the right value can be tricky, and incorrect usage may lead to unexpected results.

In separate articles, we will explore each value of the display property in detail, learn how and when to use them, and examine their browser compatibility.