display

Übersicht

Die display Eigenschaft legt den Typ einer Rendering-Box eines Elements fest. Für HTML sind die standardmäßigen display Werte in der HTML-Spezifikation beschrieben und in den User- bzw. Browser-Stylesheets angegeben. Für XML-Dokumente ist der voreingestellte Wert inline.

Zusätzlich zu den vielen verschiedenen Anzeigearten erlaubt der Wert none es, ein Element gänzlich auszublenden; wenn none verwendet wird, werden auch alle Unterelemente ausgeblendet. Das Dokument wird so dargestellt, als ob das Element nicht im Dokumentenbaum existieren würde.

Initialwert	`inline`
Anwendbar auf	alle Elemente
Vererbt	Nein
Medien	alle
Berechneter Wert	wie der angegebene Wert, außer für positionierte und umfließende Elemente und das Wurzelelement. In beiden Fällen kann der berechnete Wert ein Schlüsselwort sein, das nicht dem angegebenen entspricht.
Animierbar	Nein
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Schlüsselwortwerte */
display: none;
display: inline;
display: block;
display: contents;
display: list-item;
display: inline-block;
display: inline-table;
display: table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: ruby;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;
display: run-in;

/* Globale Werte */
display: inherit;
display: initial;
display: unset;

Werte

Modul	Wert	Beschreibung
Basic values (CSS 1)	`none`	Schaltet die Anzeige eines Elementes aus (das Element hat keinen Effekt mehr auf das Layout des Dokumentes). Alle Kindelemente werden ebenfalls nicht mehr angezeigt. Das Dokument wird so gerendert als wenn das Element nicht im Dokumentenbaum existieren würde. Um die Box trotzdem rendern zu lassen, aber den Inhalt unsichtbar zu machen, kann die `visibility` Eigenschaft verwendet werden.
	`inline`	Es werden eine oder mehrere inline Elementboxen generiert.
	`block`	Es wird eine Blockbox generiert.
	`list-item`	Es wird eine `block` Box für den Inhalt und eine separate `inline` Box für die List-Items generiert.
Extended values (CSS 2.1)	`inline-block`	Es wird eine `block` Box generiert, welche den umliegenden Inhalt umfließen lässt, als wenn es eine einzelne `inline` Box wäre.
Table model values (CSS 2.1)	`inline-table`	Verhält sich wie das `<table>` HTML Element, aber es wird ein `inline` Element generiert.
	`table`	Verhält sich wie das `<table>` HTML Element. Es wird eine Blockbox generiert.
	`table-caption`	Verhält sich wie das `<caption>` HTML Element
	`table-cell`	Verhält sich wie das `<td>` HTML Element
	`table-column`	Verhält sich wie das `<col>` HTML Element
	`table-column-group`	Verhält sich wie das `<colgroup>` HTML Element
	`table-footer-group`	Verhält sich wie das `<tfoot>` HTML Element
	`table-header-group`	Verhält sich wie das `<thead>` HTML Element
	`table-row`	Verhält sich wie das `<tr>` HTML Element
	`table-row-group`	Verhält sich wie das `<tbody>` HTML Element
Flexbox model values (CSS3)	`flex`	Es wird ein Flexbox Container als `block` Element erzeugt.
Flexbox model values (CSS3)	`inline-flex`	Es wird ein Flexbox Container als `inline` Element erzeugt.
Grid box model values (CSS3)	`grid`	Es wird ein Grid Container als `block` Element erzeugt. Da dies experimentell ist, unterstützen die meisten Browser diesen Wert nicht. Es sollte besonders darauf geachtet werden, dass `-moz-grid` nicht die Version mit Präfix hiervon ist, sondern ein XUL Layoutmodell, das nicht in Webseiten verwendet werden darf.
Grid box model values (CSS3)	`inline-grid`	Es wird ein Grid Container als `inline` Element erzeugt.
Ruby Formatierungsmodell Werte (CSS3)	`ruby`	Das Element verhält sich wie ein Inlineelement und stellt seinen Inhalt anhand des Ruby Formatierungsmodells dar. Es verhält sich wie die entsprechenden `<ruby>` HTML Elemente.
	`ruby-base`	Diese Elemente verhalten sich wie `<rb>` Elemente.
	`ruby-text`	Diese Elemente verhalten sich wie `<rt>` Elemente.
	`ruby-base-container`	Diese Elemente verhalten sich wie `<rbc>` Elemente, die als anonyme Boxen generiert wurden.
	`ruby-text-container`	Diese Elemente verhalten sich wie `<rtc>` Elemente.
Experimental values	`run-in`	Wenn eine `run-in` Box eine `block` Box enthält, genau wie `block`. Wenn einer `block` Box eine `run-in` Box folgt, wird die `run-in` Box die erste `inline` Box der `block` Box. Wenn eine `inline` Box folgt, wird aus der `run-in` Box eine `block` Box.
Experimental values	`contents`	Diese Elemente erzeugen selbst keine spezielle Box. Sie werden durch ihre Pseudobox und deren Kindboxen ersetzt.

Formale Syntax

none | inline | block | list-item | inline-block | inline-table | table | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | flex | inline-flex | grid | inline-grid | run-in | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents

Beispiele

Live Beispiel

p.secret  { display: none; }
<p class="secret">invisible text</p>

Spezifikation

Spezifikation	Status	Anmerkung
CSS Display Module Level 3 Die Definition von 'display' in dieser Spezifikation.	Arbeitsentwurf	`run-in` und `contents` Werte hinzugefügt
CSS Ruby Layout Module Level 1 Die Definition von 'display' in dieser Spezifikation.	Arbeitsentwurf	`ruby`, `ruby-base`, `ruby-text`, `ruby-base-container` und `ruby-text-container` Eigenschaften hinzugefügt
CSS Grid Layout Die Definition von 'display' in dieser Spezifikation.	Arbeitsentwurf	Grid Box-Modell hinzugefügt
CSS Flexible Box Layout Module Die Definition von 'display' in dieser Spezifikation.	Last Call Working Draft	Flexbox-Modell hinzugefügt
CSS Level 2 (Revision 1) Die Definition von 'display' in dieser Spezifikation.	Empfehlung	Table-Model und `inline-block` hinzugefügt
CSS Level 1 Die Definition von 'display' in dieser Spezifikation.	Empfehlung	`none`, `block`, `inline` und `list-item` hinzugefügt

Browser Kompatibilität

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
`none`, `inline` und `block`	1.0	1.0 (1.7 oder früher)	4.0	7.0	1.0 (85)
`inline-block`	1.0	3.0 (1.9)	5.5 [4]	7.0	1.0 (85)
`list-item`	1.0	1.0 (1.7 oder früher)	6.0	7.0	1.0 (85)
`run-in`	1.0 [5]	Nicht unterstützt	8.0	7.0	1.0 (85) [5]
`run-in`	4.0 Nicht unterstützt32.0	Nicht unterstützt	8.0	7.0	5.0 (532.5) Nicht unterstützt8.0
`inline-table`	1.0	3.0 (1.9)	8.0	7.0	1.0 (85)
`table`, `table-cell`, `table-column`, `table-colgroup`, `table-header-group`, `table-row-group`, `table-footer-group`, `table-row`, and `table-caption`	1.0	1.0 (1.7 oder früher)	8.0	7.0	1.0 (85)
`flex`	21.0-webkit	18.0 (18.0) [1] 20.0 (20.0)	11	12.50	6.1-webkit
`inline-flex`	21.0-webkit	18.0 (18.0) [1] 20.0 (20.0)	11	12.50	6.1-webkit
`grid`	?	Nicht unterstützt	10.0-ms	?	?
`inline-grid`	?	Nicht unterstützt	10.0-ms	?	?
`ruby`, `ruby-base`, `ruby-text`, `ruby-base-container`, `ruby-text-container`	?	34.0 (34.0) [3]	?	?	?
`contents`	Nicht unterstützt	37 (37) [2]	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	4.4	?	?	?	7.0-webkit

[1] Um Flexbox Unterstützung in Firefox 18 und 19 zu aktivieren, muss der Benutzer die about:config Einstellung layout.css.flexbox.enabled auf true setzen. Mehrzeilige Flexboxen werden seit Firefox 28 unterstützt.

[2] In Firefox 36 war die Einstellung, die dieses Feature steuert, standardmäßig ausgeschaltet.

[3] CSS Ruby Unterstützung verbirgt sich hinter der Einstellung layout.css.ruby.enabled. Der Benutzer muss die Einstellung auf true ändern, um sie zu aktivieren.

[4] Nur natürliche Inlineelemente.

[5] Nicht vor Inlineelementen.