Referenz:CSS/Eigenschaften/display

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Eigenschaft display CSS 3.0 CSS 2.1
Beschreibung Mit der 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.
default-Wert

abhängig vom Element

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung nein
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Spezifikation W3c logo klein.gif display property
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.

Beachten Sie

{{{Hinweis}}}

Tipp

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