display

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

/* Box suppression */
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 unter Verwendung von Schlüsselwortwerten spezifiziert.

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

<display-outside>

Diese Schlüsselwörter legen den äußeren Display-Typ des Elements fest, der im Wesentlichen seine Rolle im Flusslayout ist:

block

Das Element erzeugt eine Blockbox und erzeugt sowohl vor als auch nach dem Element Zeilenumbrüche, wenn es im normalen Fluss ist.

inline

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

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

<display-inside>

Diese Schlüsselwörter legen den inneren Display-Typ des Elements fest, der die Art des Formatierungskontextes definiert, in dem seine Inhalte angeordnet werden (vorausgesetzt, es ist ein nicht ersetztes Element):

flow

Das Element legt seine Inhalte mithilfe des Flusslayouts (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 Blockbox.

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

flow-root

Das Element erzeugt eine Blockbox, die einen neuen Block-Formatierungskontext etabliert, der den Ort der Formatierungswurzel definiert.

table

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

flex

Das Element verhält sich wie ein Blockniveau-Element und legt seine Inhalte gemäß dem Flexbox-Modell an.

grid

Das Element verhält sich wie ein Blockniveau-Element und legt seine Inhalte gemäß dem Grid-Modell an.

ruby

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

<display-listitem>

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

Ein Einzelwert von list-item führt dazu, dass sich das Element wie ein Listenelement verhält. Dies kann zusammen mit list-style-type und list-style-position verwendet werden.

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

<display-internal>

Einige Layoutmodelle wie table und ruby haben eine komplexe interne Struktur mit mehreren unterschiedlichen Rollen, die ihre Kinder und Nachfahren übernehmen können. Dieser Abschnitt definiert diese "internen" Display-Werte, die nur innerhalb dieses speziellen Layoutmodus eine Bedeutung haben.

table-row-group

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

table-header-group

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

table-footer-group

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

table-row

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

table-cell

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

table-column-group

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

table-column

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

table-caption

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

ruby-base

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

ruby-text

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

ruby-base-container

Diese Elemente werden als anonyme Boxen erzeugt.

ruby-text-container

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

<display-box>

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

contents

Diese Elemente erzeugen keine spezifische Box durch sich selbst. Sie werden durch ihre Pseudo-Box und ihre Kinderboxen ersetzt. Bitte beachten Sie, dass die CSS Display Level 3 Spezifikation beschreibt, wie der contents-Wert ungewöhnliche Elemente beeinflussen sollte — Elemente, die nicht ausschließlich 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

Schaltet die Anzeige eines Elements aus, sodass es keinen Effekt auf das Layout hat (das Dokument wird so gerendert, als ob das Element nicht existieren würde). Alle Nachfahrelemente haben ebenfalls ihre Anzeige ausgeschaltet. Um ein Element den Platz einnehmen zu lassen, den es normalerweise einnehmen würde, aber tatsächlich nichts zu rendern, verwenden Sie stattdessen die visibility-Eigenschaft.

<display-legacy>

CSS 2 verwendete eine Ein-Schlüsselwort-vorkomponierte Syntax für die display-Eigenschaft, die separate Schlüsselwörter für Blockniveau- und Inline-Niveau-Varianten desselben Layoutmodus erforderte.

inline-block

Das Element erzeugt eine Blockbox, die mit umgebendem Inhalt geflossen wird, als wäre sie eine einzige Inline-Box (die sich ähnlich verhält, wie es ein ersetztes Element tun würde).

Es ist gleichbedeutend mit inline flow-root.

inline-table

Der inline-table-Wert hat keine direkte Zuordnung in HTML. Es verhält sich wie ein HTML-<table>-Element, jedoch als Inline-Box anstatt einer Blockniveau-Box. Innerhalb der Tabellen-Box befindet sich ein Blockniveau-Kontext.

Es ist gleichbedeutend mit inline table.

inline-flex

Das Element verhält sich wie ein Inline-Niveau-Element und legt seine Inhalte gemäß dem Flexbox-Modell an.

Es ist gleichbedeutend mit inline flex.

inline-grid

Das Element verhält sich wie ein Inline-Niveau-Element und legt seine Inhalte gemäß dem Grid-Modell an.

Es ist gleichbedeutend mit inline grid.

Das CSS-Display-Modul beschreibt eine Mehrfachschlüsselwortsyntax für Werte, die Sie mit der display-Eigenschaft verwenden können, um äußeres und inneres Display explizit zu definieren. Die Einzel-Schlüsselwort-Werte (vorkomponierte <display-legacy>-Werte) werden zur Abwärtskompatibilität unterstützt.

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

.container {
  display: inline flex;
}

Dies kann auch mit dem älteren Einzelwert angegeben werden:

.container {
  display: inline-flex;
}

Weitere Informationen zu diesen Änderungen finden Sie im Leitfaden zur Verwendung der Mehrfachschlüsselwortsyntax mit CSS display.

Die einzelnen Seiten für die verschiedenen Wertetypen, die display haben kann, enthalten mehrere Beispiele für diese Werte in Aktion — siehe den Abschnitt Syntax. Außerdem finden Sie das folgende Material, das die verschiedenen Werte von display ausführlich behandelt.

• Verwendung der Mehrfachschlüsselwortsyntax mit CSS display

• Block- und Inline-Layout im normalen Fluss
• Flusslayout und Überlauf
• Flusslayout und Schreibmodi
• Einführung in Formatierungskontexte
• Im Fluss und außerhalb des Flusses

• Grundlegende Konzepte der Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Kontrollieren der Verhältnisse von Flex-Elementen entlang der Hauptachse
• Beherrschen des Umbruchs von Flex-Elementen
• Anordnung von Flex-Elementen
• Beziehung von Flexbox zu anderen Layoutmethoden
• Typische Anwendungsfälle von Flexbox

• Grundlegende Konzepte des Grid-Layouts
• Beziehung zu anderen Layoutmethoden
• Linienbasierte Platzierung
• Grid-Template-Bereiche
• Layout mit benannten Grid-Linien
• Automatische Platzierung im Grid-Layout
• Ausrichten von Elementen im CSS Grid-Layout
• Grids, logische Werte und Schreibmodi
• CSS Grid-Layout und Barrierefreiheit
• Umsetzung gängiger Layouts mit Grids

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

Es gibt eine Ausnahme, nämlich wenn display: none zu oder von einem anderen Wert animiert wird. In diesem Fall schaltet der Browser zwischen den beiden Werten um, sodass der animierte Inhalt während der gesamten Animationsdauer angezeigt wird. Zum Beispiel:

• Wenn display von none zu block (oder einem anderen sichtbaren display-Wert) animiert wird, wechselt der Wert bei 0% der Animationsdauer zu block, damit er während der gesamten Dauer sichtbar ist.
• Wenn display von block (oder einem anderen sichtbaren display-Wert) zu none animiert wird, wechselt der Wert bei 100% der Animationsdauer zu none, damit er während der gesamten Dauer sichtbar ist.

Dieses Verhalten ist nützlich, um Ein-/Ausblendeffekte zu erstellen, bei denen Sie zum Beispiel einen Container mit display: none aus dem DOM entfernen möchten, aber ihn mit opacity ausblenden möchten, anstatt sofort zu verschwinden.

Beim Animieren von display mit CSS-Animationen müssen Sie den Anfangswert von display in einem expliziten Keyframe bereitstellen (zum Beispiel mit 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 Anfangswerte für Eigenschaften, von denen Sie beim ersten Anzeigen des animierten Elements ausgehend animieren wollen. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge nicht bei der ersten Stiländerung eines Elements ausgelöst oder wenn der display-Typ von none in einen anderen Typ ändert.
• transition-behavior: allow-discrete muss in der transition-property-Deklaration (oder im transition-Shorthand) gesetzt werden, um display-Übergänge zu ermöglichen.

Für Beispiele zur Übertragung der display-Eigenschaft sehen Sie sich die Seiten zu @starting-style und transition-behavior an.

Die Verwendung eines display-Wertes von none auf einem Element entfernt es aus dem Barrierefreiheitsbaum. Dies führt dazu, dass das Element und alle seine Nachfahrenelemente von Screenreader-Technologien nicht mehr angesagt 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, aber dennoch für Hilfstechnologien wie Screenreader zugänglich zu machen.

Während display: none Inhalte aus dem Barrierefreiheitsbaum ausblendet, werden Elemente, die verborgen sind, aber von sichtbaren Elementen mittels aria-describedby oder aria-labelledby-Attributen referenziert werden, assistiven Technologien zugänglich gemacht.

Aktuelle Implementierungen in einigen Browsern entfernen aus dem Barrierefreiheitsbaum jedes Element mit einem display-Wert von contents (aber die Nachfahren bleiben bestehen). Dies führt dazu, dass das Element selbst nicht mehr von Screenreader-Technologien angesagt wird. Dies ist laut der CSS-Spezifikation falsches Verhalten.

• Mehr zugängliches Markup mit display: contents | Hidde de Vries
• Display: Contents ist kein CSS-Reset | Adrian Roselli

In einigen Browsern führt die Änderung des display-Wertes eines <table>-Elements zu block, grid oder flex dazu, dass sich sein Verhalten im Barrierefreiheitsbaum ändert. Dies wird dazu führen, dass die Tabelle von Screenreader-Technologien nicht mehr richtig angesagt wird.

• Kurze Anmerkung zu den Auswirkungen von CSS-Display-Eigenschaften auf Tabellensemantik — The Paciello Group
• Versteckter Inhalt für bessere Barrierefreiheit | Go Make Things
• MDN Understanding WCAG, Leitfaden 1.3 Erklärungen
• Verständnis des Erfolgskriteriums 1.3.1 | W3C Understanding WCAG 2.0

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   

In diesem Beispiel haben wir zwei Blockcontainer-Elemente, jedes mit drei Inline-Kindern. Darunter befindet sich ein Auswahlmenü, das es Ihnen ermöglicht, verschiedene display-Werte auf die Container anzuwenden, sodass Sie vergleichen und kontrastieren können, wie die unterschiedlichen Werte das Layout der Elemente und deren Kinder beeinflussen.

Wir haben padding und background-color auf die Container und ihre Kinder angewendet, damit es einfacher ist, den Effekt der Anzeigeeigenschaften zu sehen.

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

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

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 Mehrfachschlüsselwortwerte zur Veranschaulichung hinzugefügt wurden, die die folgenden 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 Display-Typ unter Gruppierte Werte.

• visibility, float, position
• grid, flex
• SVG display-Attribut
• Block- und Inline-Layout im normalen Fluss
• Einführung in Formatierungskontexte