display

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Die display-Eigenschaft in CSS legt fest, ob ein Element als Block- oder Inline-Box behandelt wird, sowie das Layout, das für seine Kinder verwendet wird, wie z. B. Flow-Layout, Grid oder Flex.

Formal setzt die display-Eigenschaft die inneren und äußeren Display-Typen eines Elements. Der äußere Typ bestimmt die Teilnahme eines Elements am Flow-Layout; der innere Typ legt das Layout von Kinder-Elementen fest. Einige Werte von display sind vollständig in eigenen individuellen Spezifikationen definiert; zum Beispiel ist das Detail dessen, was passiert, wenn display: flex deklariert wird, in der Spezifikation des CSS Flexible Box Models beschrieben.

Probieren Sie es aus

Syntax

css
/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* box generation */
display: none;
display: contents;

/* multi-keyword syntax */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;

/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;

/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

Die CSS-Eigenschaft display wird mit Schlüsselwortwerten angegeben.

Gruppierte Werte

Die Schlüsselwortwerte können in sechs Wertkategorien gruppiert werden.

Outside

<display-outside>

Diese Schlüsselwörter legen den äußeren Display-Typ des Elements fest, das heißt im Wesentlichen seine Rolle im Flow-Layout:

block

Das Element erzeugt eine Block-Box, die sowohl vor als auch nach dem Element Zeilenumbrüche im normalen Fluss erzeugt.

inline

Das Element erzeugt eine oder mehrere Inline-Boxen, die vor oder nach sich selbst keine Zeilenumbrüche erzeugen. Im normalen Fluss wird das nächste Element in derselben Zeile sein, wenn Platz vorhanden ist.

Hinweis: Wenn Browser, die die Multi-Keyword-Syntax unterstützen, eine display-Eigenschaft mit nur einem äußeren Wert (z. B. display: block oder display: inline) vorfinden, wird der innere Wert auf flow gesetzt (z. B. display: block flow und display: inline flow).

Hinweis: Um sicherzustellen, dass Layouts in älteren Browsern funktionieren, können Sie die Ein-Wert-Syntax verwenden. Beispielsweise könnte display: inline flex mit einem Fallback wie dem folgenden verwendet werden:

css
.container {
  display: inline-flex;
  display: inline flex;
}

Weitere Informationen finden Sie unter Verwendung der Multi-Keyword-Syntax mit CSS-Display.

Inside

<display-inside>

Diese Schlüsselwörter legen den inneren Display-Typ des Elements fest, der definiert, in welchem Formatierungskontext seine Inhalte ausgelegt werden (sofern es sich um ein nicht ersetzbares Element handelt):

flow

Das Element legt seine Inhalte unter Verwendung des Flow-Layouts (Block- und Inline-Layout) an.

Wenn sein äußerer Display-Typ inline ist und es an einem Block- oder Inline-Formatierungskontext teilnimmt, erzeugt es eine Inline-Box. Andernfalls erzeugt es eine Block-Box.

Abhängig vom Wert anderer Eigenschaften (wie position, float oder overflow) und davon, ob es selbst an einem Block- oder Inline-Formatierungskontext teilnimmt, stellt es entweder einen neuen Block-Formatierungskontext (BFC) für seine Inhalte dar oder integriert seine Inhalte in seinen übergeordneten Formatierungskontext.

flow-root

Das Element erzeugt eine Block-Box, die einen neuen Block-Formatierungskontext erstellt, wodurch der Formatierungspunkt definiert wird.

table

Diese Elemente verhalten sich wie HTML <table>-Elemente. Es definiert eine Block-Level-Box.

flex

Das Element verhält sich wie ein Block-Level-Element und legt seinen Inhalt gemäß dem Flexbox-Modell an.

grid

Das Element verhält sich wie ein Block-Level-Element und legt seinen Inhalt gemäß dem Grid-Modell an.

ruby

Das Element verhält sich wie ein Inline-Level-Element und legt seinen Inhalt gemäß dem Ruby-Formatierungsmodell an. Es verhält sich wie die entsprechenden HTML <ruby>-Elemente.

Hinweis: Wenn Browser, die die Multi-Keyword-Syntax unterstützen, auf eine display-Eigenschaft treffen, die nur einen inneren Wert hat (z. B. display: flex oder display: grid), wird der äußere Wert auf block gesetzt (z. B. display: block flex und display: block grid).

List Item

<display-listitem>

Das Element erzeugt eine Block-Box für den Inhalt und eine separate Inline-Box für das Listenelement.

Ein einzelner Wert von list-item bewirkt, dass das Element sich wie ein Listenelement verhält. Dies kann zusammen mit list-style-type und list-style-position verwendet werden.

list-item kann auch mit jedem <display-outside>-Schlüsselwort und dem Schlüsselwort flow oder flow-root aus <display-inside> kombiniert werden.

Hinweis: In Browsern, die die Multi-Keyword-Syntax unterstützen, wird, wenn kein innerer Wert angegeben ist, standardmäßig flow verwendet. Wenn kein äußerer Wert angegeben ist, hat die Hauptbox einen äußeren Anzeige-Typ von block.

Internal

<display-internal>

Einige Layout-Modelle wie table und ruby haben eine komplexe interne Struktur mit verschiedenen Rollen, die ihre Kinder und Nachfahren ausfüllen können. Dieser Abschnitt definiert diese "internen" Display-Werte, die nur innerhalb dieses bestimmten Layout-Modus Bedeutung haben.

table-row-group

Diese Elemente verhalten sich wie HTML-Elemente vom Typ <tbody>.

table-header-group

Diese Elemente verhalten sich wie HTML-Elemente vom Typ <thead>.

Diese Elemente verhalten sich wie HTML-Elemente vom Typ <tfoot>.

table-row

Diese Elemente verhalten sich wie HTML-Elemente vom Typ <tr>.

table-cell

Diese Elemente verhalten sich wie HTML-Elemente vom Typ <td>.

table-column-group

Diese Elemente verhalten sich wie HTML-Elemente vom Typ <colgroup>.

table-column

Diese Elemente verhalten sich wie HTML-Elemente vom Typ <col>.

table-caption

Diese Elemente verhalten sich wie HTML-Elemente vom Typ <caption>.

ruby-base

Diese Elemente verhalten sich wie HTML-Elemente vom Typ <rb>.

ruby-text

Diese Elemente verhalten sich wie HTML-Elemente vom Typ <rt>.

ruby-base-container

Diese Elemente werden als anonyme Boxen generiert.

ruby-text-container

Diese Elemente verhalten sich wie HTML-Elemente vom Typ <rtc>.

Box

<display-box>

Diese Werte definieren, ob ein Element überhaupt Anzeige-Boxen erzeugt.

contents

Diese Elemente erzeugen keine spezifische Box. Sie werden durch ihre Pseudo-Box und ihre Kinder-Boxen ersetzt. Beachten Sie, dass die Spezifikation in CSS Display Level 3 beschreibt, wie sich der Wert contents auf "ungewöhnliche Elemente" auswirkt – Elemente, die nicht rein durch CSS-Box-Konzepte gerendert werden, wie ersetzte Elemente. Siehe Anhang B: Auswirkungen von display: contents auf ungewöhnliche Elemente für weitere Details.

none

Deaktiviert die Anzeige eines Elements, sodass es keinen Einfluss auf das Layout hat (das Dokument wird gerendert, als ob das Element nicht existiert). Auch alle Nachfahren-Elemente haben ihre Anzeige deaktiviert. Um ein Element den Platz einnehmen zu lassen, den es normalerweise beanspruchen würde, ohne tatsächlich etwas darzustellen, verwenden Sie stattdessen die Eigenschaft visibility.

Precomposed

<display-legacy>

In CSS 2 wurde eine Ein-Wort-, vorgefertigte Syntax für die display-Eigenschaft verwendet, die separate Schlüsselwörter für Block-Level- und Inline-Level-Varianten des gleichen Layout-Modus erforderte.

inline-block

Das Element erzeugt eine Block-Box, die mit umgebendem Inhalt als eine einzige Inline-Box geflossen wird (sich ähnlich wie ein ersetzbares Element verhaltend).

Es ist äquivalent zu inline flow-root.

inline-table

Der Wert inline-table hat keine direkte Entsprechung in HTML. Es verhält sich wie ein HTML-Element vom Typ <table>, jedoch als Inline-Box statt als Block-Level-Box. Innerhalb der Tabellenbox befindet sich ein Block-Level-Kontext.

Es ist äquivalent zu inline table.

inline-flex

Das Element verhält sich wie ein Inline-Level-Element und legt seinen Inhalt gemäß dem Flexbox-Modell an.

Es ist äquivalent zu inline flex.

inline-grid

Das Element verhält sich wie ein Inline-Level-Element und legt seinen Inhalt gemäß dem Grid-Modell an.

Es ist äquivalent zu inline grid.

Welche Syntax sollten Sie verwenden?

Das CSS Display-Modul beschreibt eine Multi-Keyword-Syntax für Werte, die Sie mit der display-Eigenschaft verwenden können, um äußere und innere Anzeige-Typen explizit zu definieren. Die Ein-Wort-Werte (vorgefertigte <display-legacy>-Werte) werden zur Rückwärtskompatibilität unterstützt.

Zum Beispiel können Sie mit zwei Werten einen Inline-Flex-Container wie folgt angeben:

css
.container {
  display: inline flex;
}

Das kann auch mit dem alten einfachen Wert angegeben werden:

css
.container {
  display: inline-flex;
}

Weitere Informationen zu diesen Änderungen finden Sie in der Anleitung Verwendung der Multi-Keyword-Syntax mit CSS-Display.

Global

css
/* Global values */
display: inherit;
display: initial;
display: unset;

Beschreibung

Die einzelnen Seiten für die verschiedenen Typen von Werten, die für display festgelegt werden können, enthalten mehrere Beispiele für diese Werte in Aktion – siehe den Abschnitt Syntax. Siehe ergänzend die folgenden Materialien, die die verschiedenen Werte von display ausführlich behandeln.

Multi-Keyword-Werte

CSS Flow Layout (display: block, display: inline)

display: flex

display: grid

Animation der Anzeige

Unterstützende Browser animieren display mit einem diskreten Animationstyp. Dies bedeutet im Allgemeinen, dass die Eigenschaft zwischen zwei Werten 50% der Animation hin- und herwechselt.

Es gibt eine Ausnahme, wenn die Animation zu oder von display: none erfolgt. In diesem Fall wechselt der Browser zwischen den beiden Werten, sodass der animierte Inhalt während der gesamten Animation angezeigt wird. Beispielsweise:

  • Beim Animieren von display von none zu block (oder einem anderen sichtbaren display-Wert) wird der Wert bei 0% der Animationsdauer auf block umgeschaltet, sodass er während der gesamten Animation sichtbar ist.
  • Beim Animieren von display von block (oder einem anderen sichtbaren display-Wert) zu none wird der Wert bei 100% der Animationsdauer auf none umgeschaltet, sodass er während der gesamten Animation sichtbar ist.

Dieses Verhalten ist nützlich, um Ein-/Ausblendeffekte zu erstellen, bei denen ein Container aus dem DOM mit display: none entfernt werden soll, jedoch mit opacity ausgeblendet wird, anstatt sofort zu verschwinden.

Beim Animieren von display mit CSS-Animationen müssen Sie den Start-display-Wert in einem expliziten Keyframe angeben (z. B. mithilfe von 0% oder from). Siehe Verwendung von CSS-Animationen für ein Beispiel.

Beim Animieren von display mit CSS-Übergängen sind zwei zusätzliche Funktionen erforderlich:

  • @starting-style bietet Startwerte für Eigenschaften, von denen Sie übergehen möchten, wenn das animierte Element zum ersten Mal angezeigt wird. Dies ist erforderlich, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge nicht beim ersten Stil-Update eines Elements oder beim Wechsel des display-Typs von none zu einem anderen Typ ausgelöst.
  • transition-behavior: allow-discrete muss in der transition-property-Deklaration (oder der transition-Kurzfassung) angegeben werden, um display-Übergänge zu aktivieren.

Beispiele für den Übergang der display-Eigenschaft finden Sie auf den Seiten @starting-style und transition-behavior.

Barrierefreiheit

display: none

Die Verwendung eines display-Werts von none auf einem Element entfernt es aus dem Barrierefreiheitsbaum. Dies führt dazu, dass das Element und alle seine Nachfahren nicht mehr von Screenreadern angekündigt werden.

Wenn Sie das Element visuell ausblenden möchten, ist eine barrierefreiere Alternative die Verwendung einer Kombination von Eigenschaften, um es visuell vom Bildschirm zu entfernen, es aber dennoch assistiven Technologien wie Screenreadern zugänglich zu machen.

Obwohl display: none Inhalte aus dem Barrierefreiheitsbaum ausblendet, werden Elemente, die versteckt sind, jedoch von sichtbaren Elementen über aria-describedby- oder aria-labelledby-Attribute referenziert werden, assistiven Technologien zugänglich gemacht.

display: contents

Bei aktuellen Implementierungen in einigen Browsern werden Elemente mit einem display-Wert von contents aus dem Barrierefreiheitsbaum entfernt (aber Nachfahren bleiben erhalten). Dies führt dazu, dass das Element selbst nicht mehr von Screenreadern angekündigt wird. Dieses Verhalten entspricht jedoch nicht der CSS-Spezifikation.

Tabellen

In einigen Browsern verändert die Änderung des display-Wertes eines <table>-Elements auf block, grid oder flex seine Darstellung im Barrierefreiheitsbaum. Dies führt dazu, dass die Tabelle nicht mehr richtig von Screenreadern angekündigt wird.

Formale Definition

Anfangswertinline
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie der angegebene Wert, außer für positionierte und umfließende Elemente und das Wurzelelement. In beiden Fällen kann der berechnete Wert ein Schlüsselwort sein, das nicht dem angegebenen entspricht.
AnimationstypDiscrete behavior except when animating to or from none is visible for the entire duration

Formale Syntax

display = 
[ <display-outside> || <display-inside> ] |
<display-listitem> |
<display-internal> |
<display-box> |
<display-legacy> |
<display-outside> || [ <display-inside> | math ]

<display-outside> =
block |
inline |
run-in

<display-inside> =
flow |
flow-root |
table |
flex |
grid |
ruby

<display-listitem> =
<display-outside>? &&
[ flow | flow-root ]? &&
list-item

<display-internal> =
table-row-group |
table-header-group |
table-footer-group |
table-row |
table-cell |
table-column-group |
table-column |
table-caption |
ruby-base |
ruby-text |
ruby-base-container |
ruby-text-container

<display-box> =
contents |
none

<display-legacy> =
inline-block |
inline-table |
inline-flex |
inline-grid

Beispiele

Vergleich der display-Werte

In diesem Beispiel haben wir zwei Block-Level-Container-Elemente, jedes mit drei Inline-Kindern. Darunter haben wir ein Auswahlmenü, mit dem Sie verschiedene display-Werte auf die Container anwenden können, um die Auswirkungen der verschiedenen Werte auf das Layout des Elements und seiner Kinder zu vergleichen.

Wir haben padding und background-color auf die Container und ihre Kinder angewendet, um die Auswirkungen der Display-Werte leichter sichtbar zu machen.

HTML

html
<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
</article>

<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
</article>

<div>
  <label for="display">Choose a display value:</label>
  <select id="display">
    <option selected>block</option>
    <option>block flow</option>
    <option>inline</option>
    <option>inline flow</option>
    <option>flow</option>
    <option>flow-root</option>
    <option>block flow-root</option>
    <option>table</option>
    <option>block table</option>
    <option>flex</option>
    <option>block flex</option>
    <option>grid</option>
    <option>block grid</option>
    <option>list-item</option>
    <option>block flow list-item</option>
    <option>inline flow list-item</option>
    <option>block flow-root list-item</option>
    <option>inline flow-root list-item</option>
    <option>contents</option>
    <option>none</option>
    <option>inline-block</option>
    <option>inline flow-root</option>
    <option>inline-table</option>
    <option>inline table</option>
    <option>inline-flex</option>
    <option>inline flex</option>
    <option>inline-grid</option>
    <option>inline grid</option>
  </select>
</div>

CSS

css
html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article,
div {
  margin: 20px;
}

JavaScript

js
const articles = document.querySelectorAll(".container");
const select = document.querySelector("select");

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener("change", updateDisplay);

updateDisplay();

Ergebnis

Beachten Sie, dass einige Multi-Keyword-Werte zur Veranschaulichung hinzugefügt wurden, die folgende Entsprechungen haben:

  • block = block flow
  • inline = inline flow
  • flow = block flow
  • flow-root = block flow-root
  • table = block table
  • flex = block flex
  • grid = block grid
  • list-item = block flow list-item
  • inline-block = inline flow-root
  • inline-table = inline table
  • inline-flex = inline flex
  • inline-grid = inline grid

Weitere Beispiele finden Sie auf den Seiten für jeden separaten Anzeige-Typ unter Gruppierte Werte.

Spezifikationen

Specification
CSS Display Module Level 3
# the-display-properties
Scalable Vector Graphics (SVG) 2
# VisibilityControl

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
display
block
contents
Specific behavior of unusual elements when display: contents is applied to them
Elements with display: contents are focusable
Experimental
flex
flow-root
grid
inline
inline-block
inline-flex
inline-grid
inline-table
Transitionable when setting transition-behavior: allow-discrete
@keyframe animatable
list-item
Supported on <legend>
math
Experimental
Multi-keyword values
none
Setting display: none on an <option> element hides it from the dropdown.
Non-standard
ruby
ruby-base
ruby-base-container
ruby-text
ruby-text-container
table
table-caption
table-cell
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch