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 display-Eigenschaft wird mit Schlüsselwörtern spezifiziert.

Die Schlüsselwortwerte können in sechs Kategorien eingeteilt werden.

<display-outside>

Diese Schlüsselwörter spezifizieren den äußeren Anzeige-Typ des Elements, der im Wesentlichen seine Rolle im Flusslayout darstellt:

block

Das Element erzeugt eine Blockbox und generiert sowohl vor als auch nach dem Element Zeilenumbrüche im normalen Fluss.

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 der gleichen Zeile stehen, wenn Platz vorhanden ist.

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

<display-inside>

Diese Schlüsselwörter spezifizieren den inneren Anzeige-Typ des Elements, der den Typ des Formatierungs-Kontextes definiert, in dem seine Inhalte angelegt werden (vorausgesetzt es handelt sich um ein nicht-ersetztes Element):

flow

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

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

Abhängig vom Wert anderer Eigenschaften (wie position, float, oder overflow) und ob es selbst an einem Block- oder Inline-Formatierungskontext teilnimmt, wird es entweder einen neuen Block-Formatierungskontext (BFC) für seine Inhalte erstellen oder seine Inhalte in den Formatierungskontext seines Elternteils integrieren.

flow-root

Das Element generiert eine Blockbox, die einen neuen Block-Formatierungskontext erstellt, der festlegt, wo die Formatierungswurzel liegt.

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 seine Inhalte gemäß dem Flexbox-Modell an.

grid

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

ruby

Das Element verhält sich wie ein Inline-Level-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 für den Inhalt eine Blockbox 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 und dem flow oder flow-root <display-inside>-Schlüsselwort kombiniert werden.

<display-internal>

Einige Layout-Modelle wie table und ruby haben eine komplexe interne Struktur mit mehreren unterschiedlichen Rollen, die ihre Kinder und Nachkommen einnehmen können. Dieser Abschnitt definiert diese "internen" Anzeige-Werte, die nur innerhalb dieses bestimmten Layout-Modells 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 definieren, ob ein Element überhaupt Anzeigeboxen generiert.

contents

Diese Elemente erzeugen selbst keine spezifische Box. Sie werden durch ihre Pseudo-Box und ihre Kinderboxen ersetzt. Bitte beachten Sie, dass die CSS Display Level 3 Spezifikation beschreibt, wie der Wert contents "ungewöhnliche Elemente" beeinflussen sollte, d.h. Elemente, die nicht rein durch die CSS-Box-Konzepte gerendert werden, wie ersetzte Elemente. Weitere Details finden Sie in Anhang B: Auswirkungen von display: contents auf ungewöhnliche Elemente.

none

Schaltet die Anzeige eines Elements aus, sodass es keinen Einfluss auf das Layout hat (das Dokument wird so gerendert, als ob das Element nicht existieren würde). Alle Nachkommenelemente haben ebenfalls keine Anzeige mehr. Um ein Element den Raum einnehmen zu lassen, den es normalerweise einnehmen würde, jedoch ohne tatsächlich etwas zu rendern, verwenden Sie stattdessen die visibility-Eigenschaft.

<display-legacy>

CSS 2 benutzte eine einkomponierte Syntax mit einem Schlüsselwort für die Eigenschaft display, die separate Schlüsselwörter für Block-Level- und Inline-Level-Varianten desselben Layout-Modus erforderte.

inline-block

Das Element erzeugt eine Blockbox, die mit dem umgebenden Inhalt wie eine einzige Inline-Box geflossen wird (verhält sich ähnlich wie ein ersetztes Element).

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 <table>-Element, jedoch als Inline-Box, anstatt einer Block-Level-Box. Innerhalb der Table-Box gibt es einen Block-Level-Kontext.

Es ist äquivalent zu inline table.

inline-flex

Das Element verhält sich wie ein Inline-Level-Element und legt seine Inhalte 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 seine Inhalte gemäß dem Grid-Modell an.

Es ist äquivalent zu inline grid.

Das CSS Display-Modul beschreibt eine Multi-Schlüsselwort-Syntax für Werte, die Sie mit der display-Eigenschaft verwenden können, um äußere und innere Anzeige explizit zu definieren. Die Einkomponenten-Schlüsselwortwerte (vorkomponierte <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 spezifizieren:

.container {
  display: inline flex;
}

Dies kann auch mit dem älteren Single-Wert spezifiziert werden:

.container {
  display: inline-flex;
}

Weitere Informationen zu diesen Änderungen finden Sie im Leitfaden zur Verwendung der Multi-Schlüsselwort-Syntax mit CSS display.

Die individuellen Seiten für die verschiedenen Typen von Werten, die auf display gesetzt werden können, enthalten viele Beispiele dieser Werte in Aktion — siehe den Abschnitt Syntax. Zusätzlich hierzu finden Sie folgendes Material, das die verschiedenen Werte von display in der Tiefe behandelt.

• Verwendung der Multi-Schlüsselwort-Syntax mit CSS display

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

• Grundkonzepte des Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Steuerung der Verhältnisse von Flex-Elementen entlang der Hauptachse
• Meistern des Umbruchs von Flex-Elementen
• Anordnung von Flex-Elementen
• Beziehung von Flexbox zu anderen Layout-Methoden
• Typische Anwendungsfälle für Flexbox

• Grundkonzepte des Grid-Layouts
• Beziehung zu anderen Layout-Methoden
• In dieser Spur basierende Platzierung
• Grid-Template Areas
• 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 Zugänglichkeit
• Umsetzung gebräuchlicher Layouts mit Grids

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

Es gibt eine Ausnahme, wenn zu oder von display: none animiert wird. In diesem Fall schaltet der Browser zwischen den beiden Werten um, sodass der animierte Inhalt für die gesamte Dauer der Animation angezeigt wird. Zum Beispiel:

• Wenn display von none zu block (oder einem anderen sichtbaren display-Wert) animiert wird, schaltet der Wert bei 0% der Animationsdauer auf block, sodass es die ganze Zeit sichtbar ist.
• Wenn display von block (oder einem anderen sichtbaren display-Wert) zu none animiert wird, schaltet der Wert bei 100% der Animationsdauer auf none, sodass es die ganze Zeit sichtbar ist.

Dieses Verhalten ist nützlich für die Erstellung von Ein-/Ausgangsanimationen, bei denen zum Beispiel ein Container mit display: none aus dem DOM entfernt werden soll, aber sanft mit opacity ausgeblendet wird, statt sofort zu verschwinden.

Beim Animieren von display mit CSS-Animationen müssen Sie den Ausgangs-display-Wert in einem expliziten Keyframe angeben (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 Merkmale erforderlich:

• @starting-style bietet Ausgangswerte für Eigenschaften, von denen Sie beim ersten Anzeigen des animierten Elements übergehen wollen. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge nicht beim ersten Stilupdate eines Elements oder wenn der display-Typ von none zu einem anderen Typ wechselt ausgelöst.
• transition-behavior: allow-discrete muss auf die transition-property-Deklaration (oder die transition-Shorthand) gesetzt werden, um display-Übergänge zu aktivieren.

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

Die Verwendung eines display-Wertes von none für ein Element entfernt es aus dem Zugänglichkeitsbaum. Dies führt dazu, dass das Element und alle seine Nachkommenelemente nicht mehr von Technologien für Bildschirmleser 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, aber es trotzdem für unterstützende Technologien wie Bildschirmleser verfügbar zu machen.

Obwohl display: none Inhalte aus dem Zugänglichkeitsbaum ausblendet, werden Elemente, die versteckt, aber von aria-describedby oder aria-labelledby Attributen sichtbarer Elemente referenziert werden, den unterstützenden Technologien zugänglich gemacht.

Aktuelle Implementierungen in einigen Browsern entfernen aus dem Zugänglichkeitsbaum jedes Element mit einem display-Wert von contents (aber die Nachfolger bleiben erhalten). Dies führt dazu, dass das Element selbst nicht mehr von Technologien für Bildschirmleser angekündigt wird. Dies ist ein nicht korrektes Verhalten gemäß dem CSS-Spezifikation.

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

In einigen Browsern wird das Ändern des display-Wertes eines <table>-Elements in block, grid oder flex seine Darstellung im Zugänglichkeitsbaum verändern. Dies führt dazu, dass die Tabelle nicht mehr korrekt von Technologien für Bildschirmleser angekündigt wird.

• Kurze Notiz darüber, was CSS-Display-Eigenschaften mit Tabellensemantik machen — The Paciello Group
• Versteckte Inhalte für bessere Zugänglichkeit | Go Make Things
• MDN Verständnis der WCAG, Erläuterungen zu Richtlinie 1.3
• Verständnis des Erfolgskriteriums 1.3.1 | W3C Verständnis der 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-Level-Container-Elemente, jedes mit drei Inline-Kindern. Darunter haben wir ein Auswahlmenü, das Ihnen ermöglicht, verschiedene display-Werte auf die Container anzuwenden, sodass Sie vergleichen und kontrastieren können, wie die verschiedenen Werte das Layout des Elements und seiner Kinder beeinflussen.

Wir haben padding und background-color auf die Container und ihre Kinder angewendet, damit es einfacher ist, die Auswirkungen der Display-Werte 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 Mehrfach-Schlüsselwort-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 einzelnen Display-Typ unter Gruppierte Werte.

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