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: abhängig vom Element
|
anwendbar auf
|
alle Elemente (Unterschied Tag Element Attribut)
|
Browsersupport
|
Details: caniuse.com
|
Vererbung
|
nein
|
animierbar
|
nein
|
Beispiel
span {
display: block;
float: right;
}
Empfehlung: Zum besseren Verständnis wird das Studium des Artikels zum
Box-Modell empfohlen.
Weblinks
Siehe auch
display: block;
wird es zu einem Block-Element, das dann rechts an der Seite ausgerichtet wird.