CSS display • Art der Darstellung

display table, display table-cell

CSS display ändert das Verhalten eines Elements beim Rendern der Seite. Beliebige Elemente können die Eigenschaften eines Block- oder Inline-Elements, einer Tabellenzelle oder eines Listen-Elements annehmen, um die Merkmale oder Eigenschaften dieser Elemente anzunehmen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

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.




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

display flex display grid

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 Clearfix-Hack herbeigezaubert.

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;
}

CSS display

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.