CSS/Eigenschaften/display

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

erlaubte Werte	block = Erzwingt einen Block – das Element erzeugt eine neue Zeile (wie bei Überschriften) inline = Erzwingt die Anzeige im Text – das Element wird im laufenden Textfluss angezeigt inline-block = Erzeugt einen Block, der im Textfluss angezeigt wird und nicht auf mehrere Zeilen aufgeteilt wird list-item = wie block, jedoch mit einem Aufzählungszeichen (Bullet) davor marker = deklariert automatisch generierten Text für das Element run-in und compact = bewirken, dass das Element kontext-abhängig als Block-Element oder als Inline-Element dargestellt wird none = Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen inherit = erbt den display-Wert des Elternelements Für das Flexbox-Modell flex = generiert einen Flex-Container, der sich wie ein Blockelement verhält inline-flex = generiert einen Flex-Container, der sich wie ein Inline-Element verhält Für das Grid Layout-Modell grid = generiert ein Raster, der sich wie ein Blockelement verhält inline-grid = generiert ein Raster, der sich wie ein Inline-Element verhält 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. Vererbung steuernde Werte inherit, initial, unset und revert Defaultwert: 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 (Unterschied Tag Element Attribut)
Browsersupport	Details: caniuse.com
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.

Weblinks

• Spezifikation (W3C): display property

Siehe auch

• CSS/Tutorials/Ausrichtung/display
  • für Tabellenelemente (display:table, display:table-cell, ...)