display CSS property

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.

Außen

<display-outside>

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

block

Das Element erzeugt eine Blockbox, die sowohl vor als auch nach dem Element in normalem Fluss Zeilenumbrüche erzeugt.

inline

Das Element erzeugt eine oder mehrere Inline-Boxen, die vor oder nach sich selbst keine Zeilenumbrüche erzeugen. Im normalen Fluss befindet sich das nächste Element auf derselben Zeile, wenn Platz 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 Formatierungskontexts definiert, in dem seine Inhalte ausgelegt sind (sofern es sich um ein nicht ersetztes Element handelt). Wenn eines dieser Schlüsselwörter allein als Einzelwert verwendet wird, ist der äußere Anzeigetyp des Elements standardmäßig block (mit Ausnahme von ruby, das standardmäßig inline ist).

flow

Das Element gestaltet seine Inhalte mithilfe des Fluss-Layouts (Block-und-Inline-Layout).

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 vom Wert anderer Eigenschaften (wie position, float oder overflow) und ob es selbst an einem Block- oder Inline-Formatierungskontext teilnimmt, etabliert es entweder einen neuen Block-Formatierungskontext (BFC) für seine Inhalte oder integriert seine Inhalte in den Formatierungskontext seines Elternteils.

flow-root

Das Element erzeugt eine Blockbox, die einen neuen Block-Formatierungskontext etabliert, der bestimmt, 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 gestaltet seinen Inhalt gemäß dem Flexbox-Modell.

grid

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

ruby

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

Listenelement

<display-listitem>

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

Ein Einzelwert von list-item bewirkt, 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 verschiedenen Rollen, die ihre Kinder und Nachkommen ausfüllen können. Dieser Abschnitt definiert diese "internen" Anzeigewerte, die innerhalb dieses speziellen Layout-Modus nur 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 selbst keine spezifische Box. Sie werden durch ihre Pseudo-Box und ihre Kinderboxen ersetzt. Bitte beachten Sie, dass die CSS Display Level 3 Spezifikation definiert, wie der Wert contents "ungewöhnliche Elemente" beeinflussen sollte — Elemente, die nicht rein durch CSS-Box-Konzepte gerendert werden, wie ersetzte Elemente. Weitere Details finden Sie in Anhang B: Effects of display: contents on Unusual Elements.

none

Schaltet die Anzeige eines Elements aus, sodass es keinen Einfluss auf das Layout hat (das Dokument wird gerendert, als ob das Element nicht existierte). Alle nachfolgenden Elemente haben ebenfalls ihre Anzeige ausgeschaltet. Um ein Element den Raum einnehmen zu lassen, den es normalerweise einnehmen würde, aber ohne tatsächlich irgendetwas zu rendern, verwenden Sie stattdessen die visibility-Eigenschaft.

Vorab komponiert

<display-legacy>

CSS 2 verwendete eine Einzel-Schlüsselwort-Syntax für die display-Eigenschaft, die separate Schlüsselwörter für die Block-Level- und Inline-Level-Varianten des gleichen Layout-Modus erforderte.

inline-block

Das Element erzeugt eine Blockbox, die mit umgebendem Inhalt geflossen wird, als ob es eine einzelne Inline-Box wäre (sich wie ein ersetztes Element verhaltend).

Es entspricht inline flow-root.

inline-table

Der Wert inline-table hat keine direkte Zuordnung 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 gestaltet seinen Inhalt gemäß dem Flexbox-Modell.

Es entspricht inline flex.

inline-grid

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

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 explizit äußere und innere Anzeigen zu definieren. Die Einzel-Schlüsselwort-Werte (vorkomponierte <display-legacy>-Werte) werden für die 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 mithilfe des früheren Einzelwerts 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 Werttypen, die display haben kann, enthalten mehrere Beispiele dieser Werte in Aktion — siehe den Syntax-Abschnitt. Zusätzlich siehe 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 Überlauf
• Flow-Layout und Schreibmodi
• Einführung in Formatierungskontexte
• Im Fluss und aus dem Fluss

display: flex

• Grundkonzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Steuern der Verhältnisse von Flex-Elementen entlang der Hauptachse
• Beherrschung des Umbruchs von Flex-Elementen
• Anordnung von Flex-Elementen
• Beziehung von Flexbox zu anderen Layout-Methoden
• Typische Anwendungsfälle für Flexbox

display: grid

• Grundkonzepte des Grid-Layouts
• Beziehung zu anderen Layout-Methoden
• Linienbasierte Platzierung
• Grid-Template-Bereiche
• Layout mit benannten Gitterlinien
• Automatische Platzierung im Grid-Layout
• Ausrichten von Elementen im CSS-Grid-Layout
• Grids, logische Werte und Schreibmodi
• CSS-Grid-Layout und Barrierefreiheit
• Verwirklichen von gängigen Layouts mit Grids

Animation von display

Unterstützende Browser animieren display mit einem diskreten Animationstyp. Dies bedeutet allgemein, dass die Eigenschaft mitten in der Animation zwischen zwei Werten umschaltet.

Es gibt eine Ausnahme, wenn von oder zu display: none animiert wird. In diesem Fall wird der Browser zwischen den beiden Werten wechseln, sodass der animierte Inhalt für die gesamte Dauer der Animation gezeigt wird. Ein Beispiel:

• Wenn display von none zu block (oder einem anderen sichtbaren display-Wert) animiert wird, wird der Wert bei 0% der Animationsdauer zu block wechseln, sodass es durchgehend sichtbar ist.
• Wenn display von block (oder einem anderen sichtbaren display-Wert) zu none animiert wird, wechselt der Wert bei 100% der Animationsdauer zu none, sodass es durchgehend sichtbar ist.

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

Beim Animieren von display mit CSS-Animationen müssen Sie den Startwert von display in einem expliziten Keyframe angeben (z.B. mit 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 Anfangswerte für Eigenschaften, von denen Sie ausgehen möchten, wenn das animierte Element erstmals angezeigt wird. Dies ist erforderlich, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge nicht bei der ersten Stilaktualisierung eines Elements oder wenn der display-Typ von none zu einem anderen Typ wechselt, ausgelöst.
• transition-behavior: allow-discrete muss in der transition-property-Deklaration (oder der transition-Kurzform) gesetzt werden, um display-Übergänge zu ermöglichen.

Für Beispiele, wie die Eigenschaft display übergangen wird, siehe die Seiten @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 nachfolgenden Elemente von Technologien zur Sprachwiedergabe nicht mehr angekündigt werden.

Wenn Sie das Element optisch verstecken möchten, ist eine zugänglichere Alternative die Verwendung einer Kombination von Eigenschaften, um es visuell vom Bildschirm zu entfernen, es jedoch für unterstützende Technologien wie Bildschirmleser verfügbar zu machen.

Während display: none Inhalte aus dem Barrierefreiheit-Baum verbirgt, werden Elemente, die verborgen sind, aber von sichtbaren Elementen über die Attribute aria-describedby oder aria-labelledby referenziert werden, weiterhin von unterstützenden Technologien erkannt.

display: contents

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

• Zugänglichere Auszeichnungen 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-Wertes eines <table>-Elements zu block, grid oder flex seine Darstellung im Barrierefreiheit-Baum. Dies führt dazu, dass die Tabelle nicht mehr korrekt von Technologien zur Sprachwiedergabe angekündigt wird.

• Verdeckte Inhalte für bessere Barrierefreiheit | Go Make Things
• MDN Erkenntnisse zu WCAG, Leitlinie 1.3 Erklärungen
• Erklärung des Erfolgskriteriums 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                                 |
  <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-Container-Elemente, jedes mit drei Inline-Kindern. Darunter befindet sich ein Auswahlmenü, mit dem Sie verschiedene display-Werte auf die Container anwenden können, um zu vergleichen und zu kontrastieren, wie die verschiedenen Werte das Layout des Elements und das ihrer Kinder beeinflussen.

Wir haben padding und background-color auf die Container und deren Kinder angewendet, 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 folgende 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

Mehr Beispiele finden Sie auf den Seiten für jeden separaten Anzeigetyp 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