CSS/Eigenschaften/display

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

Siehe auch