CSS, HTML und Javascript mit {stil}

CSS display • Art der Darstellung

CSS display ändert das Verhalten eines Elements beim Rendern der Seite. Beliebige Elemente können in Block-Tags, Inline-Tags oder Flow-Elemente umgewandelt werden, sie nehmen die Merkmale der Eigenschaften von Listen-Elementen oder Tabellenzellen an.

Die am häufigsten verwendeten Werte sind display:none und display:block – CSS-Regeln, die ein Element sichtbar bzw. unsichtbar machen. display:block macht ein Element nicht nur sichtbar, sondern führt auch dazu, dass ein Element einen Zeilenumbruch erzeugt. display: inline macht das Element zum Inline-Element ohne Zeilenumbruch.

Der Browser erzeugt für jedes HTML-Element eine Box. CSS display legt den Typ der Box fest und weist ihr ein Verhalten zu. Das Verhalten von display: block ist: "Neue Zeile", das Verhalten einer Tabellenzelle (display: table-cell): "Text kann vertikal zentriert werden".

Etwas Box-Modell: Für CSS sind alle Elemente Boxen

Selbst innerhalb von Textzeilen entstehen Boxen, wenn Wörter in einem HTML-Tag wie em oder a liegen. Wird einem HTML-Element wie span oder em ein display: block zugewiesen, entsteht ein Zeilenumbruch vor und nach dem Element.

display: block | display: inline

display: block verwandelt ein Inline-Element (Element, das keinen Zeilenumbruch erzeugt) in ein Blockelement, das zu einem Zeilenumbruch führt. Umgekehrt transformiert die Eigenschaft display: inline ein Blockelement in ein Inline-Element.

ul.navleiste li { 
    display: inline; width: 120px; 
    border: 1px solid silver; float: left; 
}

display: inline-block

Elemente mit inline-block können als inline-Elemente (z.B. mit line-height und vertical-align) gestylt werden. padding und margin regeln der Abstand zum umfassenden Block und am Ende akzeptieren Elemente mit inline-block auch width und height wie ein Block-Element.

inline-block wandelt z.B. ein label-Tag in Formularen in ein Blockelement mit Zeilenumbruch um. So kann ein Formular in Spalten ohne aufwändige Tabellen aufgebaut werden.




display: inline-block auch ist eine Alternative zu float. Mit inline-block wächst der umfassende Block mit und der clearfix-Hack kann außen vor bleiben. Aber wie alle Techniken der Positionierung hat auch display: inline-block seine Ecken und Kanten: Positionieren mit float oder display:inline-block?

display: table-row / table-cell

Tabellen sind out und tabu? HTML-Tabellen als Layoutgerüst sind dem allgegenwärtigen float gewichen. Dabei hatten Tabellen und Tabellenzellen einige nützliche Eigenschaften, die mit Hilfe von display: table, table-row und table-cell wieder zum Vorschein kommen:

  • Tabellen nehmen nur den Raum ein, den sie für ihren Inhalt brauchen – und lassen sich leicht und locker horizontal zentrieren.
  • table-row und table-cell bilden die Zeile einer Tabelle nach und setzen z.B. auf großen Monitoren drei Blöcke in gleicher Höhe.
  • display:table-cell beherrscht das kleine Kunststück, ein Element vertikal zu zentrieren (vertical-align: middle) oder am unteren Rand des umfassenden Blocks zu platzieren (vertical-align: bottom).
Lorem ipsum dolor sit amet
Vivamus ullamcorper cursus nibh, at mollis enim. Proin pellentesque aliquam dapibus. Cras aliquet, quam molestie venenatis egestas, tortor sapien vulputate metus
Donec arcu odio, vehicula ac rutrum ut

CSS-Tabellen mit display: table, table-row und table-cell sind ein Kapitel für sich …

display: flex

Die Flexbox ist ein alternatives Modell für die Positionierung (CSS Flexible Box Layout Module) neben dem bekannten Block-Modell mit position: absolute / relative und float: left / right.

Das klassische Block-Modell für die Positionierung richtet Elemente entweder horizontal (display:inline) oder vertikal (display:block) aus. Äquivalent dazu richtet der Flex-Container die in ihm enthaltenen Elemente ebenfalls entweder horizontal (display:flex; flex-direction:row) oder vertikal (display:flex; flex-direction:column) aus. Der Flex-Container bestimmt als das Verhalten seiner Kinder.

Weitere Eigenschaft des Flex-Containers lassen die Flexboxen umbrechen, richten Flexboxen links, rechts, zentriert, an der Oberkante oder an der Unterkante aus. Der freie Platz zwischen den Boxen kann gleichmäßig verteilt werden.

Box 1
Box 2
Box 3

Das Flex-Modell hat in den letzten Jahren einiges an Wandel mitgemacht, sowohl in Hinsicht auf die Spezifikation als auch in Hinsicht auf die Implementierung in den verschiedenen Browsern. So kommt es, dass ein großer Teil der Berichte und Artikel zum flex-Modell veraltert sind und gehörig verwirren.

display: box;
Version von 2009.
display: flexbox;
Version 2011.
display: flex;
Aktuelle Version.

Alte Versionen des Flex-Modells sind (noch) in IE10 implementiert, IE11 unterstützt bereits die aktuelle Version. Die Unterstützung für die alten Versionen des Flex-Modells kann aber jederzeit entfallen.

Kleines Flexbox-Tutorial

display: grid

Während display-flex Elemente in Zeilen oder Spalten organisiert, generiert display: grid ein zweidimensionales Layout-Raster, in dem sich Element über mehrere Zeilen und Spalten erstrecken können. Der Inhalt kann in einer logischen Reihenfolge bleiben, denn jedes Element kann in einen beliebigen Bereich platziert werden.

CSS display

Erblich: Nein

display
block | inline | run-in

flow | flow-root | table | flex | grid | ruby | subgrid

list-item | list-item block | list-item flow | list-item flow-root | list-item block flow | list-item block flow-root | flow list-item block

table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container

content | none

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 beinhaltet.
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 der Liste kann ein optionaler Listenpunkt wie ein gefüllter Kreis vorangesetzt werden.
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).
display: flex display: grid