display

Probieren Sie es aus

display: block;

display: inline flow-root;

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

/* short display */
display: none;
display: contents;
display: block;
display: flow-root;
display: inline;
display: inline-block;
display: list-item;
display: inline list-item;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: table;
display: inline-table;

/* full display */
display: block flow;
display: block flow-root;
display: inline flow;
display: inline flow-root;
display: block flow list-item;
display: inline flow list-item;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block table;
display: inline table;

/* global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

Die CSS-display-Eigenschaft wird unter Verwendung von Schlüsselwortwerten festgelegt.

Gruppierte Werte

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

Outside

<display-outside>

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

block

Das Element erzeugt eine Block-Box und erzeugt sowohl vor als auch nach dem Element Zeilenumbrüche, wenn es im normalen Fluss steht.

inline

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

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

Inside

<display-inside>

Diese Schlüsselwörter spezifizieren den inneren Displaytyp des Elements, der definiert, in welcher Art von Formatierungskontext der Inhalt angeordnet wird (vorausgesetzt, es ist ein nicht-ersetzbares Element). Wenn eines dieser Schlüsselwörter alleine als Einzelwert verwendet wird, ist der äußere Displaytyp des Elements standardmäßig block (mit Ausnahme von ruby, der standardmäßig inline ist).

flow

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

Wenn der äußere Displaytyp inline ist und es in 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 ob es selbst in einem Block- oder Inline-Formatierungskontext teilnimmt, wird entweder ein neuer Blockformatierungskontext (BFC) für seine Inhalte erstellt oder seine Inhalte in den Formatierungskontext des Elternteils integriert.

flow-root

Das Element erzeugt eine Block-Box, die einen neuen Blockformatierungskontext 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 ordnet seinen Inhalt entsprechend dem Flexbox-Modell an.

grid

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

ruby

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

List Item

<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 wird dazu führen, 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.

Internal

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

Box

<display-box>

Diese Werte definieren, ob ein Element überhaupt Display-Boxen generiert.

contents

Diese Elemente erzeugen selbst keine spezifische Box. Sie werden durch ihre Pseudoschachtel und ihre Kinderschachteln ersetzt. Bitte beachten Sie, dass die CSS Display Level 3-Spezifikation definiert, wie der contents-Wert "ungewöhnliche Elemente" beeinflussen sollte - Elemente, die nicht rein über CSS-Box-Konzepte gerendert werden, wie ersetzte Elemente. Weitere Einzelheiten finden Sie unter Anhang B: Effekte von display: contents auf ungewöhnliche Elemente.

none

Schaltet die Anzeige eines Elements ab, sodass es keinen Einfluss auf das Layout hat (das Dokument wird so gerendert, als ob das Element nicht existierte). Alle Nachkommenelemente haben ebenfalls ihre Anzeige deaktiviert. Um ein Element den Raum einnehmen zu lassen, den es normalerweise benötigen würde, allerdings ohne etwas zu rendern, verwenden Sie stattdessen die visibility-Eigenschaft.

Precomposed

<display-legacy>

CSS 2 verwendete eine Ein-Schlüsselwort, vorkomponierte Syntax für die display-Eigenschaft, die separate Schlüsselwörter für Block-Level- und Inline-Level-Varianten desselben Layoutmodus erforderte.

inline-block

Das Element erzeugt eine Block-Box, die zusammen mit umgebendem Inhalt als eine einzelne Inline-Box geflossen wird (ähnlich wie ein ersetztes Element).

Es ist äquivalent zu inline flow-root.

inline-table

Der inline-table-Wert hat keine direkte Abbildung in HTML. Es verhält sich wie ein HTML-<table>-Element, jedoch als Inline-Box anstatt als Block-Level-Box. Innerhalb der Tabellen-Box 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 entsprechend 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 entsprechend 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 Werte, die Sie mit der display-Eigenschaft verwenden können, um explizit äußere und innere Darstellungen zu definieren. Die Einzel-Schlüsselwort-Werte (vorkomponierte <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 angeben:

.container {
  display: inline flex;
}

Dies kann auch unter Verwendung des alten Einzelwertes 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 individuellen Seiten für die verschiedenen Typen von Werten, die mit display gesetzt werden können, enthalten mehrere Beispiele für diese Werte in Aktion — siehe den Abschnitt Syntax. Außerdem sehen Sie das folgende Material, das die verschiedenen Werte von display ausführlich behandelt.

Mehrfach-Schlüsselwort-Werte

• Verwendung 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 Overflow
• 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
• 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 Layoutmethoden
• Typische Anwendungsfälle von Flexbox

display: grid

• Grundkonzepte des Grid-Layouts
• Beziehung zu anderen Layoutmethoden
• Linienbasierte Platzierung
• Raster-Template-Bereiche
• Layout mit benannten Rasterlinien
• Automatische Platzierung im Grid-Layout
• Ausrichten von Elementen im CSS-Grid-Layout
• Grids, logische Werte und Schreibmodi
• CSS-Grid-Layout und Barrierefreiheit
• Verwirklichung gängiger Layouts mit Grids

Animation von Display

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

Eine Ausnahme bildet die Animation zu oder von display: none. In diesem Fall wechselt der Browser zwischen den beiden Werten, sodass der animierte Inhalt für die gesamte Animationsdauer angezeigt wird. Beispielsweise:

• Wenn display von none zu block (oder einem anderen sichtbaren display-Wert) animiert wird, wechselt der Wert zu block bei 0% der Animationsdauer, sodass er die gesamte Zeit 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, sodass er die gesamte Zeit sichtbar ist.

Dieses Verhalten ist nützlich für das Erstellen von Ein-/Ausgangsanimationen, bei denen Sie beispielsweise einen Container mit display: none aus dem DOM entfernen möchten, ihn jedoch mit opacity ausblenden, anstatt sofort zu verschwinden.

Beim Animieren von display mit CSS-Animationen müssen Sie den Start-display-Wert in einem expliziten Keyframe angeben (z.B. mithilfe von 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 aus Sie übergehen möchten, wenn das animierte Element erstmals angezeigt wird. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge nicht bei der ersten Stilaktualisierung eines Elements ausgelöst oder wenn sich der display-Typ von none zu einem anderen Typ ändert.
• transition-behavior: allow-discrete muss in der transition-property-Deklaration (oder dem transition-Shorthand) festgelegt werden, um display-Übergänge zu ermöglichen.

Beispiele für das Übergang der display-Eigenschaft finden Sie auf den Seiten @starting-style und transition-behavior.

Barrierefreiheit

display: none

Die Verwendung eines display-Wertes von none auf einem Element entfernt es aus dem Barrierefreiheitsbaum. Dies bewirkt, dass das Element und alle seine Nachkommenelemente nicht mehr von Screenreading-Technologien 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 aber weiterhin assistiven Technologien wie Screenreadern zur Verfügung zu stellen.

Während display: none Inhalt aus dem Barrierefreiheitsbaum ausblendet, werden Elemente, die ausgeblendet, aber von sichtbaren Elementen über aria-describedby oder aria-labelledby-Attribute referenziert werden, assistiven Technologien zugänglich gemacht.

display: contents

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

• Zugänglicheres Markup mit display: contents | Hidde de Vries
• Display: Contents Ist Kein CSS-Reset | Adrian Roselli

Tabellen

In einigen Browsern führt das Ändern des display-Wertes eines <table>-Elements in block, grid oder flex dazu, dass es im Barrierefreiheitsbaum anders dargestellt wird. Dies bewirkt, dass die Tabelle nicht mehr richtig von Screenreading-Technologien angekündigt wird.

• Versteckte Inhalte für bessere a11y | Go Make Things
• MDN Understanding WCAG, Guideline 1.3-Erklärungen
• Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0

Formale Definition

Formale Syntax

display = 
  [ <display-outside> || <display-inside> ]         |
  <display-listitem>                                |
  <display-internal>                                |
  <display-box>                                     |
  <display-legacy>                                  |
  grid-lanes                                        |
  inline-grid-lanes                                 |
  ruby                                              |
  ruby-base                                         |
  ruby-text                                         |
  ruby-base-container                               |
  ruby-text-container                               |
  <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 von display-Werten

In diesem Beispiel haben wir zwei Block-Level-Container-Elemente, von denen jedes drei Inline-Kinder hat. Darunter befindet sich ein Auswahlmenü, mit dem Sie verschiedene display-Werte auf die Container anwenden können, sodass Sie vergleichen und kontrastieren können, wie die verschiedenen Werte das Layout des Elements und das ihrer 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

Bitte beachten Sie, dass einige Mehrfach-Schlüsselwort-Werte zur Veranschaulichung hinzugefügt wurden, die folgende Ä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 separaten Display-Typ unter Gruppierte Werte.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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