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 mit Schlüsselwortwerten spezifiziert.

Gruppierte Werte

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

Außen

<display-outside>

Diese Schlüsselwörter legen den äußeren Anzeigetyp des Elements fest, was im Wesentlichen seine Rolle im Fluss-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 wird das nächste Element auf derselben Zeile sein, wenn Platz vorhanden ist.

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

Innerhalb

<display-inside>

Diese Schlüsselwörter spezifizieren den inneren Anzeigetyp des Elements, der die Art des Formatierungskontexts definiert, in dem seine Inhalte layoutet werden (vorausgesetzt, es ist ein nicht-ersetztes Element):

flow

Das Element layoutet seine Inhalte mit Fluss-Layout (Block-und-Inline-Layout).

Wenn sein äußerer Anzeigetyp 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 davon, ob es selbst an einem Block- oder Inline-Formatierungskontext teilnimmt, stellt es entweder einen neuen Block-Formatierungskontext (BFC) für seine Inhalte her oder integriert seine Inhalte in den Eltern-Formatierungskontext.

flow-root

Das Element erzeugt eine Block-Box, die einen neuen Block-Formatierungskontext herstellt und definiert, wo die Formatierungswurzel liegt.

table

Diese Elemente verhalten sich wie HTML <table>-Elemente. Es definiert eine Block-Box.

flex

Das Element verhält sich wie ein Block-Element und layoutet seinen Inhalt gemäß dem Flexbox-Modell.

grid

Das Element verhält sich wie ein Block-Element und layoutet seinen Inhalt gemäß dem Gitter-Modell.

ruby

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

Listenelement

<display-listitem>

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

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.

Intern

<display-internal>

Einige Layout-Modelle wie table und ruby haben eine komplexe interne Struktur mit mehreren unterschiedlichen Rollen, die ihre Kinder und Nachkommen erfüllen können. Dieser Abschnitt definiert diese "internen" Anzeigewerte, 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.

Box

<display-box>

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

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

Vorgefertigt

<display-legacy>

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

inline-block

Das Element erzeugt eine Block-Box, die zusammen mit umgebenden Inhalten geflossen wird, als ob es eine einzige Inline-Box wäre (verhält sich ähnlich wie ein ersetztes 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 statt als Block-Level-Box. Innerhalb der Tabellen-Box befindet sich ein Block-Level-Kontext.

Es entspricht inline table.

inline-flex

Das Element verhält sich wie ein Inline-Element und layoutet seinen Inhalt gemäß dem Flexbox-Modell.

Es entspricht inline flex.

inline-grid

Das Element verhält sich wie ein Inline-Element und layoutet seinen Inhalt gemäß dem Gittermodell.

Es entspricht inline grid.

Welche Syntax sollte man 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 Anzeige ausdrücklich zu definieren. Die Einzel-Schlü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 unter Verwendung des alten Einzelwerts spezifiziert 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 individuellen Seiten für die unterschiedlichen Arten von Werten, die display gesetzt werden können, enthalten mehrere Beispiele für diese Werte in Aktion — siehe den Syntax-Abschnitt. Zusätzlich finden Sie das folgende Material, das die verschiedenen Werte von display im Detail behandelt.

Mehrfach-Schlüsselwort-Werte

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

CSS-Fluss-Layout (display: block, display: inline)

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

display: flex

• Grundlagen des Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Steuern der Verhältnisse von Flex-Elementen entlang der Hauptachse
• Beherrschen des Umbruchs von Flex-Elementen
• Reihenfolge der Flex-Elemente
• Beziehung von Flexbox zu anderen Layoutmethoden
• Typische Anwendungsfälle von Flexbox

display: grid

• Grundlagen des Gitter-Layouts
• Beziehung zu anderen Layoutmethoden
• Linienbasierte Platzierung
• Gittervorlagenbereiche
• Layout mit benannten Gitterlinien
• Automatische Platzierung im Gitterlayout
• Ausrichtung von Elementen in einem CSS-Gitterlayout
• Gitter, logische Werte und Schreibmodi
• CSS-Gitterlayout und Barrierefreiheit
• Umsetzen gängiger Layouts mit Gittern

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 zwischen den beiden wechselt.

Es gibt eine Ausnahme, nämlich wenn von oder zu display: none animiert wird. In diesem Fall wird der Browser zwischen den beiden Werten wechseln, sodass der animierte Inhalt während der gesamten Animationsdauer angezeigt wird. Zum Beispiel:

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

Dieses Verhalten ist nützlich, um Ein- und Ausstieganimationen zu erstellen, bei denen Sie zum Beispiel einen Container mit display: none aus dem DOM entfernen möchten, aber ihn mit opacity ausblenden möchten, anstatt sofort zu verschwinden.

Wenn Sie display mit CSS-Animationen animieren, 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.

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

• @starting-style stellt Anfangswerte für Eigenschaften bereit, von denen Sie ausgehend animieren möchten, wenn das animierte Element erstmals angezeigt wird. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge nicht ausgelöst, wenn das Element zum ersten Mal aktualisiert wird 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-Kurzschlüssel) gesetzt werden, um display-Übergänge zu ermöglichen.

Für Beispiele, wie die display-Eigenschaft übergeht, siehe die Seiten @starting-style und transition-behavior.

Barrierefreiheit

display: none

Die Verwendung eines display-Wertes von none auf einem Element wird es aus dem Barrierefreiheitsbaum entfernen. Dies wird dazu führen, dass das Element und alle seine Nachkommen nicht mehr von Bildschirmlesetechnologien angekündigt 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, es jedoch dennoch für unterstützende Technologien wie Bildschirmleser verfügbar zu machen.

Während display: none Inhalte aus dem Barrierefreiheitsbaum ausblendet, werden Elemente, die ausgeblendet sind, aber von sichtbaren Elementen mit aria-describedby oder aria-labelledby-Attributen referenziert werden, unterstützenden Technologien weiterhin zugänglich gemacht.

display: contents

Aktuelle Implementierungen in einigen Browsern werden aus dem Barrierefreiheitsbaum jedes Element mit einem display-Wert von contents entfernen (aber Nachkommen bleiben erhalten). Dies wird dazu führen, dass das Element selbst nicht mehr von Bildschirmlesegeräten angekündigt wird. Dies ist jedoch laut der CSS-Spezifikation nicht richtiges Verhalten.

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

Tabellen

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

• Kurze Anmerkung zu den Auswirkungen von CSS-Anzeigeeigenschaften auf Tabellensemantik — Die Paciello Group
• Versteckter Inhalt für bessere Zugänglichkeit | Go Make Things
• MDN-Verständnis-WCAG, Leitlinien 1.3 Erklärungen
• Verständnis des Erfolgsprinzips 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>                                  |
  <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, jedes 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 den Containern und ihren Kindern hinzugefügt, damit es einfacher ist zu sehen, welchen Effekt die Anzeigewerte haben.

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 werden, 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 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