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 |
| 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. |
| Animationstyp | Not animatable |
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 |
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> (en-US) HTML Element |
|
table-footer-group |
Verhält sich wie das <tfoot> (en-US) HTML Element |
|
table-header-group |
Verhält sich wie das <thead> (en-US) HTML Element |
|
table-row |
Verhält sich wie das <tr> HTML Element |
|
table-row-group |
Verhält sich wie das <tbody> (en-US) HTML Element |
|
| Flexbox model values (CSS3) | flex |
Es wird ein Flexbox Container als block Element erzeugt. |
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.
|
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> (en-US) HTML Elemente. |
ruby-base |
Diese Elemente verhalten sich wie <rb> (en-US) Elemente. |
|
ruby-text |
Diese Elemente verhalten sich wie <rt> (en-US) 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> (en-US) Elemente. |
|
| Experimental values | run-in |
|
contents |
Diese Elemente erzeugen selbst keine spezielle Box. Sie werden durch ihre Pseudobox und deren Kindboxen ersetzt. |
Formale Syntax
[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>wobei
<display-outside> = block | inline | run-in
<display-inside> = flow | flow-root | table | flex | grid | ruby
<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item
<display-internal> = 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
<display-box> = contents | none
<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid
Beispiele
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. |
Anwärter Empfehlung | 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. |
Anwärter Empfehlung | Grid Box-Modell hinzugefügt |
| CSS Flexible Box Layout Module Die Definition von 'display' in dieser Spezifikation. |
Anwärter Empfehlung | 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
BCD tables only load in the browser