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.

Initialwertinline
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie 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.
Animationstypdiskret

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> (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) This is an experimental API that should not be used in production code. 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) This is an experimental API that should not be used in production code. 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 This is an experimental API that should not be used in production code. 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.
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

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

Siehe auch