CSS display • Art der Darstellung

CSS display

Erblich: Nein

Anzeigeblock | inline | run-in
flow | flow-root | table | flex | grid | ruby | subgrid
Liste-Element | Liste-Element Block | Liste-Element flow | Liste-Element Flow-root | Liste-Element Block flow | Liste-Element Block flow-root | flow Liste-Element Block
Tabelle-Zeile-Gruppe | Tabelle-Header-Gruppe | Tabelle-Footer-Gruppe | Tabelle-Zeile | Tabelle-Zelle | Tabelle-Spalte-Gruppe | Tabelle-Spalte | Tabelle-Beschriftung | ruby-base | ruby -text | ruby-base-container | ruby-text-container
Inhalt | keine
inline-block | inline-list-item | inline-table | inline-flex | inline-grid
block stellt ein Element als Blockelement oder -box dar, das einen Zeilenumbruch vor und nach dem Element erzeugt. flex stellt ein Element als Blockelement und Flex-Container dar. flow-root könnte das Ende des Clearfix werden: Nach einem Block mit display: flow-root muss der nächste Block an den Rand, auch wenn ein Element mit float:left oder float-right in diesem Block liegt. grid erzeugt ein Layout-Raster, in dem Elemente ohne Rücksicht auf die Reihenfolge des Inhalts an eine beliebige Position gesetzt werden können (von IE10, IE11 und Edge nur in einer eingeschränkten alten Syntax unterstützt). inline-flex stellt ein Element als Inline-Element und Flex-Container dar. inline ist die Vorgabe und stellt ein Element als Inlineelement dar. Inlineelemente führen nicht zu einem Zeilenumbruch vor und nach dem Element. Mit anderen Worten: Das Element wird in der gleichen Zeile dargestellt. inline-block erzeugt eine Box, die innerhalb einer Inlinebox „fließt“. inline-table stellt eine Tabelle als Inlineelement oder -box dar, das nicht zu einem Zeilenumbruch vor und nach der Tabelle führt. list-item stellt das Element als Liste dar. Jedem Element kann ein optionaler Listenpunkt wie ein gefüllter Kreis vorangesetzt werden, der aber auch durch ein Bild, ein Icon oder Symbol ersetzt werden kann.
Eine elegante Alternative zu ::before marker weist dem Inhalt vor oder nach einem Boxelement einen Marker zu. marker wird zusammen mit den Pseudoelementen :after und :before benutzt (display:marker bei CSS-Tricks) none unterdrückt die Darstellung von Elementen. Wenn display:none gilt, muss der Browser alle Anweisungen für die Positionierung (sowohl position als auch float) ignorieren und generiert keine Box für das Element. run-in stellt das Element abhängig vom Kontext als Block- oder Inlineelement dar. table stellt ein Element als Blockelement dar. table-caption stellt ein Element als Tabellenbeschriftung (caption) dar. table-cell stellt das Element dar, als wäre es eine Tabellenzelle (td). table-column stellt das Element dar, als wäre es eine Tabellenspalte (col). table-column-group stellt das Element dar, als wäre es eine Gruppe von Tabellenspalten (colgroup). table-footer-group stellt das Element dar, als wäre es eine Gruppe von Tabellen-Fußnoten (table footer). table-header-group stellt das Element dar, als wäre es eine Gruppe von Tabellenköpfen (table header). table-row stellt das Element dar, als wäre es eine Tabellenzeile (table row). table-row-group stellt das Element dar, als wäre es eine Gruppe von Tabellenzeilen (table row).