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üsselwortwerten angegeben.

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

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

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

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

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

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

table-footer-group

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

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

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

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:

.container {
  display: inline flex;
}

Dies kann auch mit dem vorgebundenen Einzelwert angegeben werden:

.container {
  display: inline-flex;
}

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

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.

• Using the multi-keyword syntax with CSS display

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

• Grundkonzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Verhältnissteuerung von Flex-Items entlang der Hauptachse
• Beherrschung des Umbruchs bei Flex-Items
• Anordnung von Flex-Items
• Verhältnis von Flexbox zu anderen Layoutmethoden
• Typische Anwendungsfälle von Flexbox

• Grundkonzepte des Grid-Layouts
• Verhältnis zu anderen Layoutmethoden
• Zeilenbasierte 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
• Verwirklichung allgemeiner Layouts mit Grids

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.

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.

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.

• Mehr barrierefreies Markup mit display: contents | Hidde de Vries
• Display: Contents Is Not a CSS Reset | Adrian Roselli

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.

• Kurzer Hinweis, was CSS-Display-Eigenschaften mit Tabellensemantik machen — The Paciello Group
• Verborgener Inhalt für bessere Barrierefreiheit | Go Make Things
• MDN Verständnis WCAG, Richtlinie 1.3 Erklärungen
• Erklärung des Erfolgskriteriums 1.3.1 | W3C Verständnis 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, 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

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

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