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 von CSS legt fest, ob ein Element als Block- oder Inline-Box behandelt wird und welches Layout für dessen Kinder verwendet wird, wie z. B. Flow-Layout, Grid oder Flex.

Formal definiert die display-Eigenschaft den Innen- und Außen-Anzeigetyp (display types) eines Elements. Der Außentyp bestimmt die Teilnahme eines Elements am Flow-Layout; der Innentyp legt das Layout der Kinder fest. Einige display-Werte sind vollständig in ihren eigenen Spezifikationen definiert; z. B. werden die Details, die bei der Deklaration von display: flex auftreten, im CSS Flexible Box Model definiert.

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-display-Eigenschaft wird mit Schlüsselwortwerten angegeben.

Gruppierte Werte

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

Outside (Außerhalb)

<display-outside>

Diese Schlüsselwörter legen den äußeren Anzeigetyp eines Elements fest, der im Wesentlichen seine Rolle im Flow-Layout definiert:

block

Das Element erzeugt eine Blockbox und erzeugt sowohl vor als auch nach dem Element Zeilenumbrüche, wenn es sich in normalem Fluss befindet.

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 auf derselben Zeile platziert, sofern Platz vorhanden ist.

Hinweis: Wenn Browser, die die Mehrfach-Schlüsselwortsyntax unterstützen, eine display-Eigenschaft mit nur einem Außen-Wert (z. B. display: block oder display: inline) vorfinden, wird der Innentyp auf flow gesetzt (z. B. display: block flow und display: inline flow).

Hinweis: Um sicherzustellen, dass Layouts auf älteren Browsern funktionieren, können Sie die einwertige Syntax verwenden. Zum Beispiel könnte display: inline flex folgende Fallback-Definition enthalten:

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

Weitere Informationen finden Sie unter Using the multi-keyword syntax with CSS display.

Inside (Innerhalb)

<display-inside>

Diese Schlüsselwörter bestimmen den inneren Anzeigetyp des Elements, der definiert, welchen Formatierungskontext seine Inhalte verwenden (vorausgesetzt, es handelt sich um kein ersetztes Element):

flow

Das Element legt seine Inhalte mithilfe des Flow-Layouts (Block-und-Inline-Layout) aus.

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

Abhängig von den Werten anderer Eigenschaften (wie position, float oder overflow) und davon, ob es selbst an einem Block- oder Inline-Formatierungskontext teilnimmt, erzeugt es entweder einen neuen Block-Formatierungskontext (BFC) für seine Inhalte oder integriert seine Inhalte in den Elternformatierungskontext.

flow-root

Das Element erzeugt eine Blockbox, die einen neuen Block-Formatierungskontext etabliert, der die Wurzeln des Formats definiert.

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 aus.

grid

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

ruby

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

Hinweis: Wenn Browser, die die Mehrfach-Schlüsselwortsyntax unterstützen, eine display-Eigenschaft mit nur einem Innen-Wert (z. B. display: flex oder display: grid) vorfinden, wird der Außentyp auf block gesetzt (z. B. display: block flex und display: block grid).

List Item (Listenelement)

<display-listitem>

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

Ein einzelner Wert list-item bewirkt, dass das Element wie ein Listenelement behandelt wird. Dies kann in Kombination mit list-style-type und list-style-position verwendet werden.

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

Hinweis: In Browsern, die die Mehrfach-Schlüsselwortsyntax unterstützen, wird, wenn kein Innen-Wert angegeben ist, dieser standardmäßig auf flow gesetzt. Wenn kein Außen-Wert angegeben ist, hat die Hauptbox einen äußeren Anzeigetyp von block.

Internal (Intern)

<display-internal>

Einige Layout-Modelle wie table und ruby haben eine komplexe interne Struktur mit mehreren unterschiedlichen Rollen, die ihre Kinder und Nachkommen übernehmen können. Dieser Abschnitt definiert diese "internen" Display-Werte, die nur innerhalb dieses bestimmten Layout-Modus eine 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 (Box)

<display-box>

Diese Werte definieren, ob ein Element überhaupt Anzeigeboxen generiert.

contents

Diese Elemente erzeugen selbst keine spezifische Box. Sie werden durch ihre Pseudo-Box und ihre Kinder-Boxen ersetzt. Beachten Sie bitte, dass in der CSS Display Level 3-Spezifikation beschrieben wird, wie der Wert contents "ungewöhnliche Elemente" — Elemente, die nicht ausschließlich durch CSS-Box-Konzepte dargestellt werden, wie ersetzte Elemente — beeinflussen sollte. Siehe Anhang B: Auswirkungen von display: contents auf ungewöhnliche Elemente für weitere Details.

none

Schaltet die Anzeige eines Elements aus, sodass es keine Auswirkungen auf das Layout hat (das Dokument wird so gerendert, als existiere das Element nicht). Alle untergeordneten Elemente haben ebenfalls ihre Anzeige deaktiviert. Wenn ein Element den Platz einnehmen soll, den es normalerweise einnähme, ohne dass tatsächlich etwas angezeigt wird, verwenden Sie stattdessen die visibility-Eigenschaft.

Vorzusammengesetzt

<display-legacy>

CSS 2 verwendete eine Ein-Schlüsselwort-vorzusammengesetzte Syntax für die display-Eigenschaft, die separate Schlüsselwörter für Block-Level- und Inline-Level-Varianten desselben Layout-Modells erforderte.

inline-block

Das Element erzeugt eine Blockbox, die innerhalb des umgebenden Inhalts als einzelne Inline-Box dargestellt wird (ähnlich wie bei einem ersetzten Element).

Es ist äquivalent zu inline flow-root.

inline-table

Der Wert inline-table hat keine direkte Zuordnung in HTML. Es verhält sich wie ein HTML-Element vom Typ <table>, jedoch als Inline-Box anstelle einer 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 aus.

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 aus.

Es ist äquivalent zu inline grid.

Welche Syntax sollten Sie verwenden?

Das CSS Display-Modul beschreibt eine Mehrfach-Schlüsselwortsyntax für Werte, die Sie mit der display-Eigenschaft verwenden können, um den äußeren und inneren Anzeigetyp explizit zu definieren. Die Einzel-Schlüsselwortwerte (vorgebundene <display-legacy>-Werte) werden aus Gründen der Abwärtskompatibilität unterstützt.

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

css
.container {
  display: inline flex;
}

Dies kann auch mit dem vorgebundenen Einzelwert angegeben werden:

css
.container {
  display: inline-flex;
}

Weitere Informationen zu diesen Änderungen finden Sie im Using the multi-keyword syntax with CSS display-Leitfaden.

Global

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

Beschreibung

Die individuellen Seiten für die verschiedenen Werte, die display-Eigenschaften annehmen können, beinhalten mehrere Beispiele dieser Werte in Aktion — siehe den Abschnitt Syntax. Darüber hinaus finden Sie die folgenden Materialien, in denen die verschiedenen Werte von display ausführlich behandelt werden.

Mehrfach-Schlüsselwert

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

display: flex

display: grid

Anzeige animieren

Unterstützende Browser animieren display mit einem diskreten Animationstyp. Dies bedeutet im Allgemeinen, dass die Eigenschaft während der Animation zu 50 % zwischen zwei Werten umschaltet.

Eine Ausnahme tritt auf, wenn zu oder von display: none animiert wird. In diesem Fall schaltet der Browser zwischen den beiden Werten um, sodass der animierte Inhalt während der gesamten Animationsdauer angezeigt wird. Beispielsweise:

  • Wenn display von none zu block (oder einem anderen sichtbaren display-Wert) animiert wird, ändert sich der Wert zu block bei 0 % der Animationsdauer, damit er die gesamte Zeit sichtbar bleibt.
  • Wenn display von block (oder einem anderen sichtbaren display-Wert) zu none animiert wird, schaltet der Wert zu none bei 100 % der Animationsdauer, damit er die gesamte Zeit sichtbar bleibt.

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

Wenn display mit CSS-Animationen animiert wird, müssen Sie den Anfangswert von display explizit in einem Schlüsselbild (z. B. mit 0 % oder from) angeben. Siehe Verwendung von CSS-Animationen für ein Beispiel.

Wird display mit CSS-Transitions animiert, werden zwei zusätzliche Features benötigt:

  • @starting-style bietet Anfangswerte für Eigenschaften, von denen Sie die Transition auslösen möchten, wenn das animierte Element zuerst angezeigt wird. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Transitions nicht durch die erste Stilaktualisierung eines Elements oder wenn der display-Typ von none zu einem anderen Typ wechselt, ausgelöst.
  • transition-behavior: allow-discrete muss auf der transition-property-Deklaration (oder der transition-Shortcut-Definition) gesetzt werden, um display-Transitions zu aktivieren.

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

Barrierefreiheit

display: none

Wenn ein display-Wert von none auf ein Element angewendet wird, wird dieses aus dem Barrierefreiheitsbaum entfernt. Dadurch wird das Element und alle seine Nachfahren nicht mehr von Technologien zur Bildschirmlesung angesagt.

Wenn Sie das Element visuell ausblenden möchten, ist eine barrierefreiere Alternative eine Kombination von Eigenschaften zu verwenden, um es visuell vom Bildschirm zu entfernen, jedoch weiterhin für unterstützende Technologien wie Bildschirmlesegeräte verfügbar zu machen.

Während display: none Inhalt aus dem Barrierefreiheitsbaum ausblendet, bleiben Elemente, die ausgeblendet, aber von sichtbaren Elementen über aria-describedby oder aria-labelledby-Attribute referenziert werden, für unterstützende Technologien zugänglich.

display: contents

Aktuelle Implementierungen in einigen Browsern entfernen jedes Element mit einem display-Wert von contents aus dem Barrierefreiheitsbaum (aber Nachfahren bleiben erhalten). Dadurch wird das Element selbst nicht mehr von Technologien zur Bildschirmlesung angesagt. Dieses Verhalten ist laut der CSS-Spezifikation inkorrekt.

Tabellen

In einigen Browsern führt eine Änderung des display-Werts eines <table>-Elements zu block, grid oder flex zu einer Veränderung seiner Darstellung im Barrierefreiheitsbaum. Dadurch wird die Tabelle nicht mehr korrekt von Technologien zur Bildschirmlesung angesagt.

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 von display-Werten

In diesem Beispiel haben wir zwei Block-Level-Container-Elemente, von denen jedes drei Inline-Kinder enthält. Darunter befindet sich ein Auswahlmenü, mit dem Sie verschiedene display-Werte auf die Container anwenden können, um die Auswirkungen der unterschiedlichen 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 besser zu veranschaulichen.

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 Mehrfach-Schlüsselwertäquivalente der Illustration hinzugefügt wurden:

  • 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 Anzeigetyp unter Gruppierte Werte.

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch