display

Probieren Sie es aus

display: block;

display: inline-block;

display: none;

display: flex;

display: grid;

<p>
  Apply different <code>display</code> values on the dashed orange-bordered
  <code>div</code>, which contains three child elements.
</p>
<section class="default-example" id="default-example">
  <div class="example-container">
    Some text A.
    <div id="example-element">
      <div class="child">Child 1</div>
      <div class="child">Child 2</div>
      <div class="child">Child 3</div>
    </div>
    Some text B.
  </div>
</section>

.example-container {
  width: 100%;
  height: 100%;
}

code {
  background: #88888888;
}

#example-element {
  border: 3px dashed orange;
}

.child {
  display: inline-block;
  padding: 0.5em 1em;
  background-color: #ccccff;
  border: 1px solid #ababab;
  color: black;
}

Syntax

/* 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 durch Schlüsselwortwerte spezifiziert.

Gruppierte Werte

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

Außen

<display-outside>

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

block

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

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 auf derselben Zeile sein, wenn Platz vorhanden ist.

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

Innen

<display-inside>

Diese Schlüsselwörter spezifizieren den inneren Anzeigetyp des Elements, der den Typ des Formatierungskontextes definiert, in dem seine Inhalte angeordnet sind (vorausgesetzt, es handelt sich um ein nicht ersetztes Element). Wenn eines dieser Schlüsselwörter alleine als einzelner Wert verwendet wird, wird der äußere Anzeigetyp des Elements auf block gesetzt (mit Ausnahme von ruby, das auf inline gesetzt wird).

flow

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

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 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, wird entweder ein neuer Blockformatierungskontext (BFC) für seine Inhalte erstellt oder seine Inhalte werden in den übergeordneten Formatierungskontext integriert.

flow-root

Das Element erzeugt eine Block-Box, die einen neuen Blockformatierungskontext erstellt, der den Ort definiert, an dem 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 ordnet seinen Inhalt gemäß dem Flexbox-Modell an.

grid

Das Element verhält sich wie ein Block-Level-Element und ordnet seinen Inhalt gemäß dem Grid-Modell an.

ruby

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

Listenelement

<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 gemeinsam mit list-style-type und list-style-position verwendet werden.

list-item kann auch mit jedem <display-outside>-Schlüsselwort und den Schlüsselwörtern flow oder flow-root <display-inside> kombiniert werden.

Intern

<display-internal>

Einige Layoutmodelle wie table und ruby haben eine komplexe interne Struktur mit mehreren verschiedenen Rollen, die ihre Kinder und Nachkommen erfüllen können. Dieser Abschnitt definiert diese "internen" Anzeigewerte, die nur innerhalb dieses bestimmten Layoutmodus 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 generiert.

ruby-text-container

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

Box

<display-box>

Diese Werte definieren, ob ein Element überhaupt Anzeigeboxen erzeugt.

contents

Diese Elemente erzeugen keine eigene spezifische Box. Sie werden durch ihre Pseudo-Box und ihre Kinder-Boxen ersetzt. Beachten Sie, dass die CSS Display Level 3 Spezifikation beschreibt, wie der contents-Wert "ungewöhnliche Elemente" beeinflussen sollte – Elemente, die nicht rein durch CSS-Box-Konzepte wie ersetzte Elemente dargestellt werden. Siehe Anhang B: Auswirkungen von display: contents auf ungewöhnliche Elemente für mehr Details.

none

Schaltet die Anzeige eines Elements aus, so dass es keinen Einfluss auf das Layout hat (das Dokument wird gerendert, als ob das Element nicht existieren würde). Alle Nachkommenelemente haben ebenfalls ihre Anzeige ausgeschaltet. Um ein Element dazu zu bringen, den Platz einzunehmen, den es normalerweise einnehmen würde, aber ohne tatsächlich etwas darzustellen, verwenden Sie stattdessen die visibility-Eigenschaft.

Vorab zusammengestellt

<display-legacy>

CSS 2 verwendete eine ein-Schlüsselwort, vorab zusammengestellte Syntax für die display-Eigenschaft, die separate Schlüsselwörter für Block- und Inline-Level-Varianten desselben Layoutmodus erfordert.

inline-block

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

Es ist äquivalent zu 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 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 ordnet seinen Inhalt gemäß dem Flexbox-Modell an.

Es ist äquivalent zu inline flex.

inline-grid

Das Element verhält sich wie ein Inline-Level-Element und ordnet seinen Inhalt gemäß dem Grid-Modell an.

Es ist äquivalent zu inline grid.

Welche Syntax sollten Sie verwenden?

Das CSS-Display-Modul beschreibt eine Mehrfach-Schlüsselwort-Syntax für die Werte, die Sie mit der display-Eigenschaft verwenden können, um äußere und innere Anzeige explizit zu definieren. Die Ein-Schlüsselwort-Werte (vorgefertigte <display-legacy>-Werte) werden zur 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 angegeben werden:

.container {
  display: inline-flex;
}

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

Beschreibung

Die einzelnen Seiten zu den verschiedenen Typen von Werten, die display annehmen kann, enthalten mehrere Beispiele dieser Werte in Aktion — siehe den Syntax-Abschnitt. Zusätzlich finden Sie folgende Materialien, die die verschiedenen Werte von display eingehend behandeln.

Mehrfach-Schlüsselwort-Werte

• Verwenden der Mehrfach-Schlüsselwort-Syntax mit CSS display

CSS Flow Layout (display: block, display: inline)

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

display: flex

• Grundkonzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Verhältnis der Flex-Elemente entlang der Hauptachse steuern
• Meistern des Umbruchs von Flex-Elementen
• Reihenfolge von Flex-Elementen
• Beziehung von Flexbox zu anderen Layoutmethoden
• Typische Anwendungsfälle von Flexbox

display: grid

• Grundkonzepte des Grid-Layouts
• Beziehung zu anderen Layoutmethoden
• Linienbasierte Platzierung
• Grid-Template-Bereiche
• Layout mit benannten Grid-Linien
• Automatische Platzierung im Grid-Layout
• Elemente im CSS-Grid-Layout ausrichten
• Grids, logische Werte und Schreibmodi
• CSS-Grid-Layout und Barrierefreiheit
• Häufig verwendete Layouts mit Grids umsetzen

Anzeige animieren

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

Es gibt eine Ausnahme, wenn von oder zu 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. Zum Beispiel:

• Beim Animieren von display von none zu block (oder einem anderen sichtbaren display-Wert), schaltet der Wert bei 0% der Animationsdauer auf block, damit er die ganze Zeit sichtbar ist.
• Beim Animieren von display von block (oder einem anderen sichtbaren display-Wert) zu none, schaltet der Wert bei 100% der Animationsdauer auf none, sodass er die ganze Zeit sichtbar ist.

Dieses Verhalten ist nützlich, um Ein-/Ausblende-Animationen zu erstellen, bei denen Sie beispielsweise ein Container-Element mit display: none aus dem DOM entfernen möchten, aber es mit opacity ausblenden, anstatt es sofort zu entfernen.

Wenn Sie display mit CSS-Animationen animieren, müssen Sie den Startwert der display-Eigenschaft in einem expliziten Keyframe bereitstellen (zum Beispiel mit 0% oder from). Siehe Verwendung von CSS-Animationen für ein Beispiel.

Wenn Sie display mit CSS-Übergängen animieren, sind zwei zusätzliche Funktionen erforderlich:

• @starting-style bietet Anfangswerte für Eigenschaften, von denen aus Sie beim ersten Zeigen des animierten Elements den Übergang starten möchten. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge nicht beim ersten Stil-Update eines Elements oder wenn sich der display-Typ von none in einen anderen Typ ändert, ausgelöst.
• transition-behavior: allow-discrete muss in der transition-property-Deklaration (oder der transition-Kurzform) gesetzt werden, um display-Übergänge zu aktivieren.

Für Beispiele zur Übergangsanimation der display-Eigenschaft siehe die Seiten zu @starting-style und transition-behavior.

Barrierefreiheit

display: none

Die Verwendung eines display-Wertes von none auf einem Element entfernt es aus dem Barrierefreiheit-Baum. Dies führt dazu, dass das Element und alle seine Nachkommen von Bildschirmlesetechnologien nicht mehr angekündigt werden.

Wenn Sie das Element visuell ausblenden möchten, ist es eine barrierefreudigere Alternative, eine Kombination von Eigenschaften zu verwenden, um es visuell vom Bildschirm zu entfernen, aber trotzdem Hilfstechnologien wie Bildschirmleser verfügbar zu machen.

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

display: contents

Aktuelle Implementierungen in einigen Browsern entfernen aus dem Barrierefreiheit-Baum jedes Element mit einem display-Wert von contents (aber Nachkommen bleiben erhalten). Dies führt dazu, dass das Element selbst von Bildschirmlesetechnologien nicht mehr angekündigt wird. Dies ist ein inkompatibles Verhalten gemäß der CSS-Spezifikation.

• Mehr Zugang zu Inhalten mit display: contents | Hidde de Vries
• Display: Contents Ist Kein CSS-Reset | Adrian Roselli

Tabellen

In einigen Browsern ändert das Ändern des display-Wertes eines <table>-Elements in block, grid oder flex dessen Darstellung im Barrierefreiheit-Baum. Dies führt dazu, dass die Tabelle von Bildschirmlesetechnologien nicht mehr korrekt angekündigt wird.

• Kurze Notiz, was CSS-Display-Eigenschaften mit Tabellen-Semantik machen — The Paciello Group
• Versteckte Inhalte für bessere Zugänglichkeit | Go Make Things
• MDN Verstehen von WCAG, Richtlinie 1.3 Erklärungen
• Verstehen des Erfolgskriteriums 1.3.1 | W3C Verstehen von WCAG 2.0

Formale Definition

Formale Syntax

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   

Beispiele

Vergleich der display-Werte

In diesem Beispiel haben wir zwei Block-Level-Container-Elemente, jedes mit drei Inline-Kindern. Darunter haben wir ein Auswahlmenü, das es Ihnen erlaubt, unterschiedliche display-Werte auf die Container anzuwenden, damit 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, den Effekt der Anzeige-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 die folgenden Äquivalente 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 Anzeigetyp unter Gruppierte Werte.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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