Philip at 08:08, 23 January 2025

2025-01-23T08:08:30Z

New page

{{Programming
|name = CSS: display
|image = Css.png
|image size = 300
|portal = [[Portal:CSS|CSS Portal]] • [[Portal:Web Developers|Web Developers Portal]]
}}
Understanding the CSS property <code>display</code> 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 <code>display</code> property:

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

== Other Articles on CSS ==
{{Encyclopedia CSS/Navigation}}
{{Navigation/CSS|state=collapsed}}
[[wj-ru:Энциклопедия CSS: display]]
[[wj-de:Enzyklopädie CSS: display]]
[[wj-es:Enciclopedia CSS: display]]
[[wj-it:Enciclopedia CSS: display]]
[[wj-fr:Encyclopédie CSS: display]]

[[Category:CSS]]

Encyclopedia CSS: display - Revision history

Philip at 08:08, 23 January 2025