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-Eigenschaft display wird mit Schlüsselwortwerten angegeben.

Gruppierte Werte

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

Outside

<display-outside>

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

block

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

inline

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

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

Inside

<display-inside>

Diese Schlüsselwörter spezifizieren den inneren Display-Typ des Elements, der den Typ des Formatierungskontextes definiert, in dem sein Inhalt ausgelegt wird (vorausgesetzt, es handelt sich um ein nicht-ersetztes Element). Wenn eines dieser Schlüsselwörter allein als einzelner Wert verwendet wird, lautet der äußere Display-Typ des Elements standardmäßig block (mit Ausnahme von ruby, das standardmäßig inline ist).

flow

Das Element legt seinen Inhalt im Flusslayout (Block-und-Inline-Layout) dar.

Wenn sein äußerer Display-Typ inline ist und es an einem Block- oder Inline-Formatierungskontext teilnimmt, generiert es eine Inline-Box. Andernfalls generiert 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, stellt es entweder einen neuen Block-Formatierungskontext (BFC) für seinen Inhalt her oder integriert seinen Inhalt in den Formatierungskontext seines Elternteils.

flow-root

Das Element generiert 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-Ebenen-Box.

flex

Das Element verhält sich wie ein Block-Ebenen-Element und legt seinen Inhalt nach dem Flexbox-Modell aus.

grid

Das Element verhält sich wie ein Block-Ebenen-Element und legt seinen Inhalt nach dem Grid-Modell aus.

ruby

Das Element verhält sich wie ein Inline-Ebenen-Element und legt seinen Inhalt nach dem Ruby-Formatierungsmodell aus. Es verhält sich wie die entsprechenden HTML-<ruby>-Elemente.

List Item

<display-listitem>

Das Element generiert eine Block-Box für den Inhalt und eine separate Listenelement-Inline-Box.

Ein einzelner Wert von list-item lässt das Element sich wie ein Listenelement verhalten. 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 Layout-Modelle wie table und ruby haben eine komplexe interne Struktur mit mehreren verschiedenen Rollen, die ihre Kinder und Nachkommen ausfüllen können. Diese Sektion definiert diese "internen" Display-Werte, die nur innerhalb dieses bestimmten Layout-Modus 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 Darstellungsboxen generiert.

contents

Diese Elemente erzeugen selbst keine spezifische Box. Sie werden durch ihre Pseudobox und ihre Kinderboxen ersetzt. Beachten Sie, dass die CSS Display Level 3-Spezifikation definiert, wie der contents-Wert "ungewöhnliche Elemente" beeinflussen sollte – Elemente, die nicht rein durch CSS-Box-Konzepte gerendert werden, wie ersetzte Elemente. 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 Effekt auf das Layout hat (das Dokument wird gerendert, als ob das Element nicht existierte). Alle Nachfahrenelemente haben ebenfalls ihre Anzeige ausgeschaltet. Um ein Element den Platz einnehmen zu lassen, den es normalerweise einnehmen würde, ohne jedoch tatsächlich etwas zu rendern, verwenden Sie stattdessen die visibility-Eigenschaft.

Vorbeschriftet

<display-legacy>

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

inline-block

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

Es entspricht inline flow-root.

inline-table

Der Wert inline-table hat keine direkte Entsprechung in HTML. Es verhält sich wie ein HTML-<table>-Element, aber als Inline-Box statt als Block-Level-Box. Innerhalb der Tabellenbox 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 nach dem Flexbox-Modell aus.

Es entspricht inline flex.

inline-grid

Das Element verhält sich wie ein Inline-Level-Element und legt seinen Inhalt nach dem Grid-Modell aus.

Es entspricht 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 äußere und innere Anzeigen explizit zu definieren. Die Ein-Schlüsselwort-Werte (vorgefasst <display-legacy>-Werte) werden aus Gründen der Abwärtskompatibilität unterstützt.

Zum Beispiel können Sie, indem Sie zwei Werte verwenden, einen Inline-Flex-Container wie folgt angeben:

.container {
  display: inline flex;
}

Dies kann auch durch die ältere Ein-Wert-Spezifikation angegeben werden:

.container {
  display: inline-flex;
}

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

Beschreibung

Die einzelnen Seiten für die verschiedenen Arten von Werten, die auf display gesetzt werden können, enthalten mehrere Beispiele für diese Werte in Aktion — siehe den Abschnitt Syntax. Zusätzlich sehen Sie folgendes Material, das die verschiedenen Werte von display ausführlich behandelt.

Mehrfach-Schlüsselwert-Werte

• Verwendung der Mehrfach-Schlüsselwort-Syntax mit CSS-Display

CSS-Flusslayout (display: block, display: inline)

• Block- und Inline-Layout im normalen Fluss
• Flusslayout und Überlauf
• Flusslayout und Schriftarten
• Einführung in Formatierungskontexte
• Im Fluss und aus dem Fluss

display: flex

• Grundlagenkonzepte des Flexbox-Modells
• Ausrichtung von Elementen in einem Flex-Container
• Steuerung der Verhältnisse von Flex-Elementen entlang der Hauptachse
• Beherrschung des Umbruchs von Flex-Elementen
• Anordnung von Flex-Elementen
• Beziehung des Flexbox-Modells zu anderen Layoutmethoden
• Typische Anwendungsfälle des Flexbox-Modells

display: grid

• Grundlagenkonzepte des Grid-Layouts
• Beziehung zu anderen Layoutmethoden
• Linienbasierte Platzierung
• Grid-Template-Bereiche
• Layout mit benannten Gitternetzen
• Automatische Platzierung im Grid-Layout
• Ausrichtung von Elementen im CSS-Grid-Layout
• Grids, logische Werte und Schriftmodi
• CSS-Grid-Layout und Barrierefreiheit
• Umsetzung üblicher Layouts mit Grids

Animation von display

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

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

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

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

Wenn display mit CSS-Animationen animiert wird, müssen Sie den Anfangswert von display in einem expliziten Keyframe angeben (zum Beispiel mit 0% oder from). Siehe Verwendung von CSS-Animationen für ein Beispiel.

Beim Animieren display mit CSS-Übergängen werden zwei zusätzliche Funktionen benötigt:

• @starting-style bietet Anfangswerte für Eigenschaften, von denen Sie beim ersten Anzeigen des animierten Elements eine Übergangsstart erwarten. Dies ist erforderlich, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden bei CSS-Übergängen keine Übergänge beim ersten Stilaktualisierung 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 dem transition-Shorthand) gesetzt werden, um display-Übergänge zu aktivieren.

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

Barrierefreiheit

display: none

Die Verwendung eines display-Werts von none auf einem Element entfernt es aus dem Barrierefreiheitsbaum. Dies führt dazu, dass das Element und alle seine Nachkommen nicht mehr von Bildschirmlesegeräten angesagt werden.

Wenn Sie das Element optisch ausblenden möchten, ist eine barrierefreiere Alternative, eine Kombination von Eigenschaften zu verwenden, um es visuell von der Anzeige zu entfernen, es jedoch weiterhin für assistive Technologien wie Bildschirmlesegeräte verfügbar zu machen.

Obwohl display: none Inhalte aus dem Barrierefreiheitsbaum ausblendet, werden Elemente, die verborgen sind, aber von sichtbaren Elementen durch aria-describedby oder aria-labelledby-Attribute referenziert werden, für unterstützende Technologien zugänglich gemacht.

display: contents

Aktuelle Implementierungen in einigen Browsern entfernen jedes Element mit einem display-Wert von contents aus dem Barrierefreiheitsbaum (aber die Nachkommen bleiben erhalten). Dies führt dazu, dass das Element selbst nicht mehr von Bildschirmlesetechnologien angesagt wird. Dieses Verhalten ist laut der CSS-Spezifikation fehlerhaft.

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

Tabellen

In einigen Browsern verändert das Ändern des display-Werts eines <table>-Elements auf block, grid oder flex seine Darstellung im Barrierefreiheitsbaum. Dies führt dazu, dass die Tabelle von Bildschirmlesetechnologien nicht mehr richtig angesagt wird.

• Kurznotiz darüber, was CSS-Display-Eigenschaften mit Tabelle-Semantiken tun – The Paciello Group
• Verborgene Inhalte für bessere Zugänglichkeit | Go Make Things
• MDN-Verständnis WCAG, Leitfaden 1.3-Erklärungen
• Erklärung des Erfolgskriteriums 1.3.1 | W3C Verständnis 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 Container-Elemente auf Block-Ebene, jeweils mit drei Inline-Kindern. Darunter haben wir ein Auswahlmenü, das es 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 hinzugefügt, 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 Mehrfach-Schlüsselwort-Werte 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

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
• SVG display Attribut
• Block- und Inline-Layout im normalen Fluss
• Einführung in Formatierungskontexte