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 mittels Schlüsselwort-Werten spezifiziert.

Die Schlüsselwort-Werte können in sechs Wertkategorien gruppiert werden.

<display-outside>

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

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 befindet sich das nächste Element auf derselben Linie, wenn Platz vorhanden ist.

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

<display-inside>

Diese Schlüsselwörter spezifizieren den inneren Display-Typ des Elements, der den Typ des Formatierungskontexts definiert, in dem seine Inhalte ausgelegt sind (vorausgesetzt, es handelt sich um ein nicht ersetztes Element):

flow

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

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

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

flow-root

Das Element erzeugt eine Block-Box, die einen neuen Block-Formatierungskontext etabliert und definiert, 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 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.

<display-listitem>

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

Ein einzelner Wert von list-item sorgt dafür, dass sich das Element wie ein Listen-Item 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 den flow oder flow-root <display-inside>-Schlüsselwörtern kombiniert werden.

<display-internal>

Einige Layout-Modelle wie table und ruby haben eine komplexe interne Struktur mit mehreren verschiedenen Rollen, die ihre Kinder und Nachkommen ausfüllen 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 <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 Display-Boxen generiert.

contents

Diese Elemente erzeugen selbst keine spezifische Box. Sie werden durch ihre Pseudo-Box und ihre Kinder-Boxen ersetzt. Bitte beachten Sie, dass die CSS Display Level 3 Spezifikation definiert, wie der contents-Wert "ungewöhnliche Elemente" — Elemente, die nicht rein durch CSS-Box-Konzepte gerendert 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 keinen Einfluss auf das Layout hat (das Dokument wird gerendert, als ob das Element nicht existiert). Alle Nachkommenelemente haben ebenfalls ihre Anzeige ausgeschaltet. Um ein Element den Platz einnehmen zu lassen, den es normalerweise einnehmen würde, aber ohne tatsächlich etwas zu rendern, verwenden Sie stattdessen die visibility-Eigenschaft.

<display-legacy>

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

inline-block

Das Element erzeugt eine Block-Box, die mit dem umgebenden Inhalt fließt, als ob es eine einzelne Inline-Box wäre (verhält sich ähnlich wie ein ersetzt Element).

Es entspricht 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 als Block-Level-Box. Innerhalb der Table-Box befindet sich ein Block-Level-Kontext.

Es entspricht inline table.

inline-flex

Das Element verhält sich wie ein Inline-Level-Element und legt seinen Inhalt gemäß dem Flexboxmodell aus.

Es entspricht inline flex.

inline-grid

Das Element verhält sich wie ein Inline-Level-Element und legt seinen Inhalt gemäß dem Gridmodell aus.

Es entspricht inline grid.

Das CSS Display-Modul beschreibt eine Mehrschlüsselwort-Syntax für Werte, die Sie mit der display-Eigenschaft verwenden können, um äußere und innere Anzeige explizit zu definieren. Die Einzelschlüsselwort-Werte (vorgefertigte <display-legacy>-Werte) werden aus Gründen der Rückwä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 alten Einzelwert spezifiziert werden:

.container {
  display: inline-flex;
}

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

Die einzelnen Seiten für die verschiedenen Werttypen, die auf display gesetzt werden können, enthalten zahlreiche Beispiele dieser Werte in Aktion — siehe den Syntax Abschnitt. Zusätzlich finden Sie folgendes Material, das die verschiedenen Werte von display eingehend behandelt.

• Verwendung der Mehrschlüsselwort-Syntax mit CSS display

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

• Grundlegende Konzepte 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 Layout-Methoden
• Typische Anwendungsfälle von Flexbox

• Grundlegende Konzepte des Grid-Layouts
• Beziehung zu anderen Layout-Methoden
• Linienbasierte Platzierung
• Grid-Template-Bereiche
• Layout mit benannten Gitterlinien
• Automatische Platzierung im Grid-Layout
• Ausrichten von Elementen im CSS-Grid-Layout
• Grids, logische Werte und Schreibmodi
• CSS-Grid-Layout und Barrierefreiheit
• Realisierung gemeinsamer Layouts mit Grids

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

Es gibt eine Ausnahme, und zwar beim Animieren von oder zu display: none. In diesem Fall wechselt der Browser zwischen den beiden Werten, sodass der animierte Inhalt für die gesamte Animationsdauer angezeigt wird. Zum Beispiel:

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

Dieses Verhalten ist nützlich für das Erstellen von Ein-/Ausgangsanimationen, bei denen Sie beispielsweise ein Container-Element mit display: none aus dem DOM entfernen möchten, es aber mit Opacity ausblenden möchten, anstatt es sofort verschwinden zu lassen.

Beim Animieren von display mit CSS-Animationen müssen Sie den Startwert von display in einem expliziten Keyframe angeben (z.B. 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 Startwerte für Eigenschaften, von denen Sie beim ersten Anzeigen des animierten Elements übergehen möchten. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge nicht bei der ersten Stilaktualisierung eines Elements oder beim Wechsel des display-Typs von none zu einem anderen Typ ausgelöst.
• transition-behavior: allow-discrete muss auf der transition-property-Deklaration (oder der transition-Kurzhand) gesetzt werden, um display-Übergänge zu ermöglichen.

Beispiele zum Übergang der display-Eigenschaft finden Sie auf den Seiten zu @starting-style und transition-behavior.

Die Verwendung eines display-Werts von none auf einem Element entfernt es aus dem Accessibility Tree. Dies bewirkt, dass das Element und alle seine Nachkommen nicht mehr von Screenreader-Technologie angesagt werden.

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, aber dennoch assistiven Technologien wie Screenreadern verfügbar zu machen.

Während display: none Inhalte aus dem Accessibility Tree verbirgt, werden Elemente, die verborgen sind, aber von sichtbaren Elementen über aria-describedby oder aria-labelledby-Attribute referenziert werden, assistiven Technologien offengelegt.

Aktuelle Implementierungen in einigen Browsern entfernen jedes Element mit einem display-Wert von contents aus dem Accessibility Tree (aber Nachkommen bleiben bestehen). Dies bewirkt, dass das Element selbst nicht mehr von Screenreader-Technologie angesagt wird. Dies ist ein falsches Verhalten gemäß der CSS-Spezifikation.

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

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

• Kurze Notiz darüber, was CSS-Display-Eigenschaften für Tabellensemantik tun — The Paciello Group
• Verborgen Inhalt für bessere Barrierefreiheit | Go Make Things
• MDN Verständnis von WCAG, Guideline 1.3 Erklärungen
• Verständnis des Erfolgskriteriums 1.3.1 | W3C Verständnis von 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 es Ihnen ermöglicht, verschiedene display-Werte auf die Container anzuwenden, was es Ihnen erlaubt, zu vergleichen und zu kontrastieren, wie die verschiedenen Werte das Layout des Elements und das seiner Kinder beeinflussen.

Wir haben padding und background-color auf die Container und ihre Kinder angewendet, damit es einfacher ist, die Wirkung 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 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

Sie können mehr Beispiele auf den Seiten für jeden einzelnen Anzeige-Typ unter Gruppierte Werte finden.

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