display CSS property

Probieren Sie es aus

display: block;

display: inline flow-root;

display: none;

display: flex;

display: grid;

display: grid-lanes;

<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: grid-lanes;
display: inline-grid-lanes;
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 grid-lanes;
display: inline grid-lanes;
display: block table;
display: inline table;

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

Die CSS-Eigenschaft display wird mithilfe von Schlüsselwortwerten angegeben.

Gruppierte Werte

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

Außen

<display-outside>

Diese Schlüsselwörter geben den äußeren Anzeigetyp des Elements an, also im Wesentlichen seine Rolle im Flow-Layout:

block

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

inline

Das Element erzeugt eine oder mehrere Inline-Boxen, die weder vor noch nach sich selbst Zeilenumbrüche erzeugen. Im normalen Fluss befindet sich das nächste Element in derselben Zeile, wenn genügend Platz vorhanden ist.

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

Innen

<display-inside>

Diese Schlüsselwörter geben den inneren Anzeigetyp des Elements an, der die Art des Formatierungskontexts bestimmt, in dem sein Inhalt angeordnet wird (vorausgesetzt, es handelt sich um ein nicht ersetztes Element). 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 verwendet).

flow

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

Wenn sein äußerer Anzeigetyp inline ist und es an einem Block- oder Inline-Formatierungskontext beteiligt ist, 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 beteiligt ist, richtet es entweder einen neuen Block-Formatierungskontext (BFC) für seinen Inhalt ein oder integriert seinen Inhalt in den Formatierungskontext seines Elternelements.

flow-root

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

table

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

flex

Das Element verhält sich wie ein Element auf Blockebene und ordnet seinen Inhalt gemäß dem Flexbox-Modell an.

grid

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

grid-lanes

Das Element verhält sich wie ein Element auf Blockebene und ordnet seinen Inhalt mithilfe des Grid-Lanes-Layouts an. Spalten werden durch grid-template-columns definiert und verhalten sich wie ein striktes Grid, während Elemente in Blockrichtung gepackt werden, um Lücken zwischen Elementen unterschiedlicher Größe zu füllen. Einzelheiten finden Sie unter Grid-Lanes-Layout.

ruby

Das Element verhält sich wie ein Element auf Inline-Ebene und ordnet seinen Inhalt gemäß dem Ruby-Formatierungsmodell an. 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 list-item führt dazu, dass sich das Element wie ein Listenelement verhält. Dieser kann zusammen mit list-style-type und list-style-position verwendet werden.

list-item kann außerdem mit jedem Schlüsselwort <display-outside> sowie den Schlüsselwörtern flow oder flow-root von <display-inside> kombiniert werden.

Intern

<display-internal>

Einige Layout-Modelle wie table und ruby haben eine komplexe interne Struktur mit mehreren unterschiedlichen Rollen, die ihre Kindelemente und Nachfahren einnehmen können. Dieser Abschnitt definiert diese „internen“ display-Werte, die nur innerhalb dieses bestimmten Layout-Modus eine 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 erzeugt.

ruby-text-container

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

Box

<display-box>

Diese Werte bestimmen, ob ein Element überhaupt Anzeige-Boxen erzeugt.

contents

Diese Elemente erzeugen selbst keine spezifische Box. Sie werden durch ihre Pseudo-Box und die Boxen ihrer Kindelemente ersetzt. Beachten Sie, dass die CSS-Display-Level-3-Spezifikation definiert, wie sich der Wert contents auf „ungewöhnliche Elemente“ auswirken soll – Elemente, die nicht ausschließlich durch CSS-Box-Konzepte gerendert werden, wie etwa ersetzte Elemente. Weitere Details finden Sie in Anhang B: Auswirkungen von display: contents auf ungewöhnliche Elemente.

none

Deaktiviert die Anzeige eines Elements, sodass es keinen Einfluss auf das Layout hat (das Dokument wird gerendert, als ob das Element nicht existierte). Die Anzeige aller Nachfahrenelemente wird ebenfalls deaktiviert. Verwenden Sie stattdessen die Eigenschaft visibility, damit ein Element den Platz einnimmt, den es normalerweise einnehmen würde, ohne tatsächlich etwas zu rendern.

Vorkombiniert

<display-legacy>

CSS 2 verwendete für die Eigenschaft display eine vorkombinierte Syntax mit einem Schlüsselwort, die separate Schlüsselwörter für Varianten desselben Layout-Modus auf Block- und Inline-Ebene erforderte.

inline-block

Das Element erzeugt eine Block-Box, die mit dem umgebenden Inhalt fließt, als wäre sie eine einzelne Inline-Box (ähnlich dem Verhalten eines ersetzten Elements).

Es entspricht inline flow-root.

inline-table

Der Wert inline-table hat keine direkte Entsprechung in HTML. Er verhält sich wie ein HTML-<table>-Element, jedoch als Inline-Box und nicht als Box auf Blockebene. Innerhalb der Tabellen-Box befindet sich ein Kontext auf Blockebene.

Es entspricht inline table.

inline-flex

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

Es entspricht inline flex.

inline-grid

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

Es entspricht inline grid.

inline-grid-lanes

Das Element verhält sich wie ein Element auf Inline-Ebene und ordnet seinen Inhalt mithilfe des Grid-Lanes-Layouts an. Zeilen werden durch grid-template-rows definiert und verhalten sich wie ein striktes Grid, während Elemente in Inline-Richtung gepackt werden, um Lücken zwischen Elementen unterschiedlicher Größe zu füllen. Einzelheiten finden Sie unter Grid-Lanes-Layout.

Es entspricht inline grid-lanes.

Welche Syntax sollten Sie verwenden?

Das CSS-display-Modul beschreibt eine Mehrschlüsselwort-Syntax für Werte, die Sie mit der Eigenschaft display verwenden können, um äußere und innere Anzeige explizit zu definieren. Die Einzelwert-Schlüsselwörter (vorkombinierte <display-legacy>-Werte) werden aus Gründen der Abwärtskompatibilität unterstützt.

Mit zwei Werten können Sie beispielsweise einen Inline-Flex-Container wie folgt angeben:

.container {
  display: inline flex;
}

Dies kann auch mit dem älteren Einzelwert angegeben werden:

.container {
  display: inline-flex;
}

Weitere Informationen zu diesen Änderungen finden Sie im Leitfaden Verwenden der Mehrschlüsselwort-Syntax mit CSS display.

Beschreibung

Die einzelnen Seiten für die verschiedenen Werttypen, die für display festgelegt werden können, enthalten mehrere Beispiele für diese Werte in der Praxis – siehe den Abschnitt Syntax. Lesen Sie außerdem die folgenden Materialien, die die verschiedenen display-Werte ausführlich behandeln.

Mehrschlüsselwortwerte

• Verwenden der Mehrschlü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 Schreibrichtungen
• Einführung in Formatierungskontexte
• Im Fluss und außerhalb des Flusses

display: flex

• Grundkonzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Steuern der Verhältnisse von Flex-Elementen entlang der Hauptachse
• Umbruch von Flex-Elementen meistern
• Anordnen von Flex-Elementen
• Beziehung von Flexbox zu anderen Layout-Methoden
• Typische Anwendungsfälle von Flexbox

display: grid

• Grundkonzepte des Grid-Layouts
• Beziehung zu anderen Layout-Methoden
• Linienbasierte Platzierung
• Grid-Vorlagenbereiche
• Layout mit benannten Grid-Linien
• Automatische Platzierung im Grid-Layout
• Ausrichten von Elementen im CSS-Grid-Layout
• Grids, logische Werte und Schreibrichtungen
• CSS-Grid-Layout und Barrierefreiheit
• Umsetzen gängiger Layouts mit Grids
• Grid-Lanes-Layout

display animieren

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

Es gibt eine Ausnahme: beim Animieren zu oder von display: none. In diesem Fall wechselt der Browser zwischen den beiden Werten so, dass 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) wechselt der Wert bei 0% der Animationsdauer zu block, damit er durchgehend sichtbar ist.
• Beim Animieren von display von block (oder einem anderen sichtbaren display-Wert) zu none wechselt der Wert bei 100% der Animationsdauer zu none, damit er durchgehend sichtbar ist.

Dieses Verhalten ist nützlich, um Einblend- und Ausblendanimationen zu erstellen, bei denen Sie beispielsweise einen Container mit display: none aus dem DOM entfernen möchten, ihn jedoch mit opacity ausblenden lassen wollen, statt ihn sofort verschwinden zu lassen.

Wenn Sie display mit CSS-Animationen animieren, müssen Sie den anfänglichen display-Wert in einem expliziten Keyframe angeben, beispielsweise mit 0% oder from. Ein Beispiel finden Sie unter CSS-Animationen verwenden.

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

• @starting-style stellt Startwerte für Eigenschaften bereit, von denen Sie übergehen möchten, wenn das animierte Element erstmals angezeigt wird. Dies ist erforderlich, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Transitions weder bei der ersten Stilaktualisierung eines Elements noch bei einer Änderung des display-Typs von none zu einem anderen Typ ausgelöst.
• transition-behavior: allow-discrete muss in der Deklaration von transition-property (oder in der Kurzform transition) festgelegt werden, um display-Transitions zu aktivieren.

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

Barrierefreiheit

display: none

Die Verwendung eines display-Werts von none für ein Element entfernt es aus dem Barrierefreiheitsbaum. Dadurch werden das Element und alle seine Nachfahrenelemente nicht mehr von Screenreader-Technologien angekündigt.

Wenn Sie das Element visuell ausblenden möchten, ist es barrierefreier, eine Kombination von Eigenschaften zu verwenden, um es visuell vom Bildschirm zu entfernen, es jedoch weiterhin für unterstützende Technologien wie Screenreader verfügbar zu machen.

Während display: none Inhalt aus dem Barrierefreiheitsbaum ausblendet, werden ausgeblendete Elemente, auf die von den Attributen aria-describedby oder aria-labelledby sichtbarer Elemente verwiesen wird, unterstützenden Technologien bereitgestellt.

display: contents

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

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

Tabellen

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

• Ausgeblendete Inhalte für bessere a11y | Go Make Things
• MDN: WCAG verstehen, Erläuterungen zu Richtlinie 1.3
• Erfolgskriterium 1.3.1 verstehen | 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 Containerelemente auf Blockebene, jeweils mit drei Inline-Kindelementen. Darunter befindet sich ein Auswahlmenü, mit dem Sie verschiedene display-Werte auf die Container anwenden können. Dadurch können Sie vergleichen, wie sich die verschiedenen Werte auf das Layout des Elements und seiner Kindelemente auswirken.

Wir haben padding und background-color auf die Container und ihre Kindelemente angewendet, damit die Auswirkungen der display-Werte leichter erkennbar sind.

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>grid-lanes</option>
    <option>block grid-lanes</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>
    <option>inline-grid-lanes</option>
    <option>inline grid-lanes</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 Mehrschlüsselwortwerte zur Veranschaulichung hinzugefügt wurden, die den folgenden Entsprechungen entsprechen:

• 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 zu den einzelnen display-Typen unter Gruppierte Werte.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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