CSS display

Jedes HTML-Element ist eine Box

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".

Die am meistverwendeten Werte sind display:none und display:block – CSS-Regeln, die ein Element sichtbar machen oder es verstecken. display:block macht ein Element nicht nur sichtbar, sondern erzeugt auch einen Zeilenumbruch. display: grid und display: flex sind die Stars des Layouts.

CSS display box — 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 none

display: none unterdrückt die Anzeige eines Elements vollständig und das Element verbraucht keinen Platz im Layout der Seite (ein ähnliches Verhalten bewirkt auch das HTML-Attribut hidden).

display: none

hidden

CSS display: none

.shownone { 
    display: none;
}

<div class="shownone">
    <img src="roller.png" width="100" height="100" alt="">
</div>

HTML Attribut hidden

<div hidden>
	<img src="roller.png" width="100" height="100" alt="">
</div>

CSS display ist immer ein Schalter: Die Werte sind nicht numerisch, so dass display nicht durch CSS transition animierbar ist.

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.

CSS
HTML
Tutorials
Links

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

display: contents

Blöcke, die als display:contents notiert sind, verlieren ihre Wirkung, so als wären ihr öffnendes und schließendes HTML-Tag nicht mehr vorhanden. Anders als display: none bleiben ihre Inhalte mit allen Eigenschaften erhalten.

Diese Eigenschaft ist gedacht, um Blöcke aus tief verschachtelten Elementen herauszuholen. display: contents kann so z.B. die Elemente von Grid-Gruppen direkt unter einen Grid-Container rendern, um allen Zeilen eines Grids dieselbe Höhe zu geben.

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.

Name
Hausnummer
PLZ

display: inline-block ist auch 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 vor Jahren zuerst dem float, dann der Flexbox und dem Grid 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 Level 1 / April 2018) 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 bleibt in der logischen Reihenfolge, denn jedes Element kann in einen beliebigen Bereich platziert werden.

Der jüngste Spross ist display: subgrid. Im Grid-Layout bleiben die Inhalte in ihrer logischen Reihenfolge.

display: flow-root

Eigentlich wirkt flow-root nicht anders als display: block, ABER display:flow-root läutet das Ende des Clearfix-Hacks ein, denn flow-root ist genau die Eigenschaft, die der alte Clearfix-Hack herbeigezaubert hat.

Der Clearfix-Hack wurde auf das umfassende Element angewendet. Anders als ein clear:both, um den folgenden Inhalt zurück an den Rand zu zwingen, zog der Clearfix-Hack einen umfassenden Block auf.

HEADER

CONTENT

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a odio viverra, tincidunt nulla sed, molestie urna. Mauris suscipit hendrerit dui. Praesent hendrerit mi id augue faucibus fringilla. Aliquam sodales sem eget efficitur consequat.

Vestibulum fermentum accumsan enim, sit amet tempor ligula sodales nec. Duis placerat lorem eget gravida facilisis. In in est gravida, maximus ligula vitae, dignissim arcu.

FOOTER

Ganz umkompliziert:

.content {
	display: flow-root;
}

Erblich: Nein

display: block | inline
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 erzeugt.
contents: entfernt alle Eigenschaften eines Elements, aber läßt seine Inhalte unangetastet.
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.
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).
run-in: stellt das Element abhängig vom Kontext als Block- oder Inlineelement dar, aber gab es nur in IE11.