display

/* 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.

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

<display-outside>

Diese Schlüsselwörter geben den äußeren Anzeige-Typ des Elements an, der im Wesentlichen seine Rolle im Flow-Layout beschreibt:

block

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

inline

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

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

<display-inside>

Diese Schlüsselwörter geben den inneren Anzeige-Typ des Elements an, der den Typ des Formatierungskontexts bestimmt, in dem seine Inhalte angeordnet werden (sofern es sich um ein nicht ersetztes Element handelt):

flow

Das Element ordnet seine Inhalte mithilfe eines Flow-Layouts (Block-und-Inline-Layout) an.

Wenn der äußere Anzeige-Typ inline ist und das Element 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, bildet es entweder einen neuen Block-Formatierungskontext (BFC) für seine Inhalte oder integriert seine Inhalte in den übergeordneten Formatierungskontext.

flow-root

Das Element erzeugt eine Block-Box, die einen neuen Block-Formatierungskontext bildet und definiert, wo die Formatierungswurzel liegt.

table

Diese Elemente verhalten sich wie HTML-<table>-Elemente. Sie definieren eine Block-Ebene-Box.

flex

Das Element verhält sich wie ein Block-Ebene-Element und ordnet seinen Inhalt entsprechend dem Flexbox-Modell an.

grid

Das Element verhält sich wie ein Block-Ebene-Element und ordnet seinen Inhalt entsprechend dem Grid-Modell an.

ruby

Das Element verhält sich wie ein Inline-Ebene-Element und ordnet seinen Inhalt entsprechend dem Ruby-Formatierungsmodell an. Es verhält sich wie die entsprechenden HTML-<ruby>-Elemente.

<display-listitem>

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

Ein einzelner Wert von list-item bewirkt, 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 jedem <display-outside>-Schlüsselwort sowie dem Schlüsselwort flow oder flow-root aus <display-inside> kombiniert werden.

<display-internal>

Einige Layout-Modelle wie table und ruby haben eine komplexe interne Struktur mit mehreren verschiedenen Rollen, die deren Kinder und Nachkommen erfüllen können. Dieser Abschnitt definiert diese "internen" Anzeige-Werte, die nur innerhalb des jeweiligen Layout-Modus Bedeutung haben.

table-row-group

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

table-header-group

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

table-footer-group

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

table-row

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

table-cell

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

table-column-group

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

table-column

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

table-caption

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

ruby-base

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

ruby-text

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

ruby-base-container

Diese Elemente werden als anonyme Boxen generiert.

ruby-text-container

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

<display-box>

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

contents

Diese Elemente erzeugen selbst keine spezifische Box. Sie werden durch ihre Pseudo-Box und ihre Kinder-Boxen ersetzt. Beachten Sie, dass die CSS Display Level 3-Spezifikation definiert, wie der Wert contents "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 keine Auswirkungen auf das Layout hat (das Dokument wird so gerendert, als würde das Element nicht existieren). Alle Nachkommen-Elemente haben ebenfalls ihre Anzeige deaktiviert. Um ein Element den Platz einnehmen zu lassen, den es normalerweise beanspruchen würde, dabei aber nichts anzuzeigen, verwenden Sie stattdessen die Eigenschaft visibility.

<display-legacy>

CSS 2 verwendete eine einheitliche Schlüsselwort-Syntax für die display-Eigenschaft, die separate Schlüsselwörter für Block-Ebene- und Inline-Ebene-Varianten desselben Layout-Modus erforderte.

inline-block

Das Element erzeugt eine Block-Box, die mit umgebendem Inhalt so umgeht, als wäre sie eine einzelne Inline-Box (die sich wie ein ersetztes Element verhält).

Dies entspricht inline flow-root.

inline-table

Der Wert inline-table hat keine direkte Zuordnung in HTML. Es verhält sich wie ein HTML-<table>-Element, aber als Inline-Box anstelle einer Block-Ebene-Box. Innerhalb der Table-Box befindet sich ein Block-Ebene-Kontext.

Es entspricht inline table.

inline-flex

Das Element verhält sich wie ein Inline-Ebene-Element und ordnet seinen Inhalt entsprechend dem Flexbox-Modell an.

Es entspricht inline flex.

inline-grid

Das Element verhält sich wie ein Inline-Ebene-Element und ordnet seinen Inhalt entsprechend dem Grid-Modell an.

Es entspricht inline grid.

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 Anzeigen explizit zu definieren. Die Einzel-Schlüsselwort-Werte (vorab komponierte <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:

.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 Verwenden der Multi-Keyword-Syntax mit CSS display-Leitfaden.

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

• Verwenden der Multi-Keyword-Syntax mit CSS display

• Block- und Inline-Layout im normalen Fluss
• Flow-Layout und Überlauf
• Flow-Layout und Schreibrichtungen
• Formatierungskontexte erklärt
• Innerhalb und außerhalb des Flusses

• Grundkonzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Kontrollieren der Verhältnisse von Flex-Elementen entlang der Hauptachse
• Meistern des Umbruchs von Flex-Elementen
• Anordnen von Flex-Elementen
• Beziehung von Flexbox zu anderen Layoutmethoden
• Typische Anwendungsfälle von Flexbox

• Grundkonzepte des Grid-Layouts
• Verhältnis zu anderen Layoutmethoden
• Linienbasierte Platzierung
• Grid-Template-Bereiche
• Layout mit benannten Grid-Linien
• Automatische Platzierung im Grid-Layout
• Box-Ausrichtung im Grid-Layout
• Grids, logische Werte und Schreibrichtungen
• CSS-Grid-Layout und Barrierefreiheit
• Umsetzung allgemeiner Layouts mit Grids

Unterstützende Browser animieren display mit einem diskreten Animationstyp. Dies bedeutet im Allgemeinen, dass die Eigenschaft zwischen zwei Werten in der Mitte der Animation umspringt.

Es gibt eine Ausnahme, wenn von oder zu display: none animiert wird. In diesem Fall springt der Browser zwischen den beiden Werten, 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 zu block bei 0% der Animationsdauer, damit er die gesamte Dauer sichtbar ist.
• Wenn display von block (oder einem anderen sichtbaren display-Wert) zu none animiert wird, wechselt der Wert zu none bei 100% der Animationsdauer, damit er die gesamte Dauer sichtbar ist.

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

Bei der Animation von display mit CSS-Animationen müssen Sie den anfänglichen display-Wert in einem expliziten Keyframe (z. B. mit 0% oder from) angeben. 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 gibt Startwerte für Eigenschaften an, von denen Sie bei sichtbaren Übergängen übergehen möchten, wenn das animierte Element zum ersten Mal angezeigt wird. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge nicht ausgelöst, wenn das Element zum ersten Mal aktualisiert wird oder sich der Anzeigewert von none zu einem anderen Typ ändert.
• transition-behavior: allow-discrete muss auf der Deklaration der transition-property-Eigenschaft (oder der transition-Kurzform) gesetzt sein, um display-Übergänge zu ermöglichen.

Für Beispiele zum Übergang der display-Eigenschaft siehe die Seiten @starting-style und transition-behavior.

Die Verwendung eines display-Werts von none für ein Element entfernt es aus dem Barrierefreiheit-Baum. Dies führt dazu, dass das Element und alle seine Nachkommenelemente nicht mehr von Screenreader-Technologie angekündigt werden.

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

Während display: none Inhalte aus dem Barrierefreiheit-Baum ausblendet, werden Elemente, die ausgeblendet sind, aber in sichtbaren Elementen über aria-describedby- oder aria-labelledby-Attribute referenziert werden, assistiver Technologie zugänglich gemacht.

Aktuelle Implementierungen in einigen Browsern entfernen jedes Element mit einem display-Wert von contents (aber nicht dessen Nachkommen) aus dem Barrierefreiheit-Baum. Dies führt dazu, dass das Element selbst nicht mehr von Screenreader-Technologie angekündigt wird. Dieses Verhalten ist laut der CSS-Spezifikation nicht korrekt.

• Barrierefreieres Markup mit display: contents | Hidde de Vries
• Display: Contents ist kein CSS-Reset | Adrian Roselli

In einigen Browsern verändert die Änderung des display-Werts eines <table>-Elements zu block, grid oder flex dessen Darstellung im Barrierefreiheit-Baum. Dies führt dazu, dass die Tabelle von Screenreader-Technologie nicht mehr korrekt angekündigt wird.

• Kurze Notiz darüber, was die CSS-display-Eigenschaften für die Semantik von Tabellen tun — Die Paciello-Gruppe
• Versteckte Inhalte für bessere Barrierefreiheit | Go Make Things
• MDN Verständnis von WCAG, Erläuterungen zu Richtlinie 1.3
• Erklärung 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 Block-Container-Elemente, jeweils mit drei Inline-Kindern. Darunter befindet sich ein Dropdown-Menü, mit dem Sie verschiedene display-Werte auf die Container anwenden können, um zu vergleichen, wie sich die verschiedenen Werte auf das Layout des Elements und seiner Kinder auswirken.

Wir haben padding und background-color auf die Container und ihre Kinder angewendet, damit die Auswirkungen der display-Werte leichter sichtbar sind.

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 Multi-Keyword-Werte zur Veranschaulichung hinzugefügt wurden, die den folgenden Äquivalenten entsprechen:

• 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 der einzelnen Anzeige-Typen unter Gruppierte Werte.

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