display

Übersicht

Die Eigenschaft 'display bestimmt die Anzeigeart

Standardwert

inline

Anwendbar auf

'table' und 'inline-table' Elemente

Geerbt

Ja

Medium

visual

Werte

inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none oder inherit

Syntax

display: inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

Werte

inline

Das Element wird im Textfluss angezeigt

block

Das Element erzeugt eine Box

inline-block (Seit CSS 2.1)

Das Elment verhält sich wie ein Inline-Element, es kann aber eine Größe, ein Rahmen und ein Außenabstand angegeben werden

list-item

Darstellung als Listenelement

none

Das Elment wird nicht angezeigt. Der Browser verhält sich als wäre das Element nicht vorhanden

run-in

Es wird entweder ein inline oder block Element erzeugt, je nach Zusammenhang

table

Das Elment wird als Tabelle dargestellt (in HTML <table>)

inline-table

Das Element wird als Tabelle dargestellt, verhält sich aber als wäre es mit ein inline-block Element

table-row-group

Das Element gruppiert eine oder mehrere Tabellenzeilen

table-column

Das Element wird als Tabellenspalte angezeigt

table-column-group

Das Element gruppiert eine oder mehrere Tabellenzeilen

table-header-group

Wie table-row-group, wird aber als erstes angezeigt. Wenn die Seite gedruckt wird werden diese Zeilen meist wiederholt

table-footer-group

Wie table-row-group, wird aber am Ende der Tabelle angezeigt.

table-row

Das Element wird als Tabellenzeile angezeigt

table-cell

Das Element wird als Tabellenzelle angezeigt

table-caption

inherit

der Browser verwendet den Wert des Elternelements.

Beispiele

Text <div style="display:none;">Text</div> Text

Text <div style="display:block;">Text</div> Text

Text <div style="display:inline;">Text</div> Text

Text <div style="display:inline-block;">Text</div> Text

Text <div style="display:run-in;">Text</div> Text

Browser-Kompatibilität

¹) Firefox kennt aber die Werte -moz-inline-block und -moz-run-in

Siehe auch

visibility