CSS/Eigenschaften/display

Die Eigenschaft display legt fest, welche Art von Box ein Element erzeugt. Jedes Element kann Null oder mehr Boxen erzeugen

Erlaubte Werte

Als Werte für display konnte ursprünglich nur ein einzelner Wert angegeben werden. Das CSS3-Displaymodul erweitert das um eine Mehrwort-Syntax, die das äußere und innere Verhalten einer Box getrennt beschreiben. Die Einzelworte aus CSS 2.1 werden als "vorgefertigte" Werte (precomposed values) bezeichnet.

Die Zweiwort-Syntax wird bislang nur von Firefox und Safari unterstützt. Hier bezeichnet das erste Wort das Außenverhalten des Elements und das zweite Wort legt das innere Formatierungsmodell des Elements fest.

Eine Aufstellung aller möglichen Werte finden Sie weiter unten.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

inline - dass bestimmte Elemente scheinbar einen anderen Defaultwert haben, liegt nicht an CSS, sondern an dem Stylesheet, das im Browser eingebaut ist. Verwenden Sie deshalb niemals display: initial;!

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

span {
  display: block;
  float: right;
}

Normalerweise ist span ein inline-Element. Durch display: block; wird es zu einem Block-Element, das dann rechts an der Seite ausgerichtet wird.

Empfehlung: Zum besseren Verständnis wird das Studium des Artikels zum Box-Modell empfohlen.

Siehe auch

• CSS/Tutorials/Ausrichtung/display
  • für Tabellenelemente (display:table, display:table-cell, ...)
• CSS/Tutorials/Sichtbarkeit von Elementen
• MathML - das display-Attribut kennt dort aber nur block und inline

Weblinks

• Spezifikation (W3C): display property
• MDN: display

Einzelwort-Syntax

Die Einzelwort-Syntax wird von allen modernen Browsern unterstützt. Die mit CSS3 markierten Werte sind im Displaymodul Level 3 hinzugekommen und sind auf älteren Browsern wie Internet Explorer nicht verfügbar.

none

Das Element wird nicht dargestellt. Es existiert zwar im DOM, wird im Layout der Seite aber nicht berücksichtigt.

Beachten Sie: Wenn Sie ein Element per JavaScript ausblenden wollen, setzen Sie entweder eine Klasse, die eine CSS-Regel aktiviert, die mittels display:none seine natürliche display-Eigenschaft überschreibt, oder verwenden Sie die hidden-Eigenschaft (was per Browser-Stylesheet das display:none herbeiführt). Direkt element.style.display = "none"; zu setzen ist deutlich umständlicher.

contents

Das Element wird selbst nicht dargestellt und so behandelt, als befände sich sein Inhalt an seiner Stelle. Ein Styling mit CSS ist nicht möglich. Wenn das Element Teil eines Flex- oder Grid-Containers ist, werden seine Kind-Elemente zu den Flex- bzw. Grid-Items.

 

block

Legt fest, dass das Element der Blockformatierung unterliegt.

inline

Legt fest, dass das Element der Inlineformatierung unterliegt.

Block- oder Inlineformatierung sind nur von Bedeutung, wenn das Elternelement seinen Inhalt gemäß dem Flow-Modell anordnet. Flow ist der Normalfall, abweichende Layoutmodelle werden mittels anderer display-Werte festgelegt und sind Table, Flexbox, Grid oder Ruby.

Ein inline formatiertes Element kann auf mehrere Zeilen umgebrochen werden.

 

flow-root

(CSS3) Legt fest, dass das Element der Blockformatierung unterliegt und ein Flow-Root bildet - also einen neuen Blockformatierungskontext erzeugt. Dieser Wert kann frühere Workarounds zum Erzwingen von Blockformatierungskontexten (z. B. overflow:hidden) obsolet machen.

inline-block

Legt fest, dass das Element zwar im inline-Fluss bleibt, nach innen jedoch ein Flow-Root bildet. Deshalb wird das Element nicht im Textfluss seines Elternelements umgebrochen. Innerhalb des Elements ist ein Textumbruch aber möglich.

list-item

Legt fest, dass das Element der Blockformatierung unterliegt. Ein Flow-Root wird nicht gebildet, aber dem Element wird ein List-Marker zugeordnet, der mit den list-style-Eigenschaften beeinflusst werden und auf den auch die ::marker-Pseudoklasse angewendet werden kann.

run-in

Derzeit (Oktober 2022) noch in keinem Browser implementiert. Das Element wird wie ein inline-Element formatiert, das sich in den Flow des nachfolgenden Elements integriert.

Für das Flexbox Layout-Modell

flex

Das Element unterliegt der Blockformatierung und layoutet seinen Inhalt als Flexbox

inline-flex

Das Element unterliegt der Inlineformatierung und layoutet seinen Inhalt als Flexbox

Für das Grid Layout-Modell

grid

Das Element unterliegt der Blockformatierung und layoutet seinen Inhalt als Raster

inline-grid

Das Element unterliegt der Inlineformatierung und layoutet seinen Inhalt als Raster

Ferner – für Tabellen aus Nicht-Tabellen-Elementen (z.B. bei XML)

table

Das Element enthält tabellarisch angeordnete Kindelemente und erzeugt eine neue Zeile. Wirkt wie das table-Element in HTML.

inline-table

Das Element enthält tabellarisch angeordnete Kindelemente und wird im laufenden Textfluss angezeigt. Wirkt wie das table-Element in HTML, aber inline

table-row

Das Element enthält nebeneinander angeordnete Kindelemente. Wirkt wie das tr-Element in HTML

table-row-group

Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das tbody-Element in HTML

table-header-group

Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das thead-Element in HTML.

table-footer-group

Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das tfoot-Element in HTML.

table-column

Das Element steht für eine Gruppe von Elementen, die eine Spalte der Tabelle bilden. Wirkt wie das col-Element in HTML.

table-column-group

Das Element steht für eine Gruppe von Elementen mit der Eigenschaft table-cell. Wirkt wie das colgroup-Element in HTML.

table-cell

Das Element steht für eine Tabellenzelle. Wirkt wie das td-Element in HTML (auch für th-Elemente).

table-caption

Das Element steht für eine Tabellenüberschrift. Wirkt wie das caption-Element in HTML.

⇒ CSS/Eigenschaften/display: table

Zweiwort-Syntax

Diese Syntax ist derzeit nur in Firefox und Safari verfügbar. In dieser Syntax wird das Außen- und Innenverhalten eines Elements getrennt, also wie es sich in den Flow des Elternelements einfügt, und welches Layout es auf seine Kindelemente anwendet.

Erster Wert: Außenverhalten

Das Außenverhalten ist nur von Bedeutung, wenn das Elternelement Flow-Layout verwendet.

block

Das Element wird als Blockelement formatiert

inline

Das Element wird als Inlineelement formatiert

run-in

Das Element wird als Run-In Element formatiert

Zweiter Wert: Innenverhalten

flow

Das Element layoutet seinen Inhalt gemäß dem Flow-Modell (also Standardverhalten ohne spezielles Layoutmodell)

flow-root

Das Element layoutet seinen Inhalt gemäß dem Flow-Modell und bildet ein Flow-Root.

list-item

Die Angabe list-item wird als dritter Wert zusammen mit flow oder flow-root verwendet, um das Element als Listeneintrag zu formatieren.

table

Das Element layoutet seinen Inhalt als Tabelle

flex

Das Element layoutet seinen Inhalt als Flexbox

grid

Das Element layoutet seinen Inhalt als Raster

ruby

Das Element layoutet seinen Inhalt gemäß Ruby-Layout