CSS 2.1: display

Außerhalb von Tabellen:

inline

Dieser Wert bedingt, dass ein Element anhand des Kontexts zur Inline- Formatierung dargestellt wird, d.h. es paßt sich in einen laufenden Textabsatz ein. Die Abmessungen eines Inline- Level- Elements lassen sich nur durch die font- und die border-Eigenschaften sowie padding beeinflussen. Die Eigenschaften width, height und margin haben keine Wirkung.

block

Durch diesen Wert wird ein Element allgemein im Kontext zur Blockformatierung, d.h. als Block- Level- Element, dargestellt.

list-item

Der Wert run-in korrekt dargestellt.
Oben: normale Darstellung einer Überschrift h2.
Mitte: h2 { display: run-in } mit nachfolgender Block- Box.
Unten: h2 { display: run-in } mit nachfolgender Inline- Box.

Dieser Wert bedingt, dass ein Element im Kontext zur Blockformatierung als Punkt einer Liste dargestellt wird.

run-in

Dieser Wert verwandelt zuerst die Box des eingeschlossenen Elements in eine Run-In-Box. Wenn eine Block-Box (die nicht mit position oder float formatiert ist) der Run-In-Box als unmittelbarer Nachbar folgt, dann wird die Run-In-Box zur ersten Inline-Box dieser Block-Box.

In allen anderen Fällen wird die Run-In-Box zur Block-Box.

compact

Dieser Wert wurde nicht von CSS 2 in den Entwurf für CSS 2.1 mit übernommen. Er sollte bewirken, dass das Element seitlich neben das folgende (Block-Level-)Element plaziert wird.

marker

Dieser Wert wurde nicht von CSS 2 in den Entwurf für CSS 2.1 mit übernommen. Er sollte in Verbindung mit den Pseudoelementen :before und :after dazu dienen, eine Markierung neben dem Text anzubringen.

inline-block

Dieser Wert wurde mit CSS 2.1 neu eingeführt. Er bewirkt, dass das Element äußerlich wie eine Inline- Box innerhalb der Textzeile formatiert ist, ähnlich einem replazierten Element. Das Innere einer Inline-Block- Box ist jedoch wie eine Block- Box formatiert. Das Element innerhalb der Box ist wie ein replaziertes Element formatiert. Damit lassen sich für ein Element im Kontext zur Inline- Formatierung die Eigenschaften width, height und margin deklarieren.

none

Dieser Wert generiert nicht eine unsichtbare Box, sondern überhaupt kein Element.

inherit

Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Es gibt zwei Unterschiede zwischen den Deklarationen visibility:hidden; und display:none;. Display:none; bewirkt, dass die so deklarierte Box überhaupt nicht generiert wird und der Browser die Seite so aufbaut, als wenn diese Box nicht vorhanden wäre. Durch visibility:hidden; dagegen wird die Box samt Inhalt nur 'durchsichtig', ihre Fläche bleibt freigestellt.
Der zweite Unterschied bezieht sich auf die Nachkommenelemente. Kindelemente eines mit display:none deklarierten Elementes können nicht ausgegeben werden, auch dann nicht, wenn sie anders als mit none deklariert werden. Nachkommenelemente von mit visibility:hidden deklarierten Elementen erben diese Deklarierung, können aber selbst durch den Wert visible wieder sichtbar sein.

Ausschließlich in Tabellen:

table

Definiert, dass sich das Element im Kontext zur Blockformatierung wie das HTML-Element <table> verhält, d.h. innerhalb des Elementflusses wird es wie ein eigener Block dargestellt.

inline-table

Wert inline-table:
korrekte Darstellung (siehe Basislinie)

Definiert das Element als Tabelle in einem Kontext zur Inline- Formatierung, d.h. es wird nicht wie ein eigener Block dargestellt, sondern kann innerhalb eines Blockes Text integriert werden.

table-row

Definiert, dass sich das Element wie das HTML-Element <tr> verhält.

table-row-group

Definiert, dass sich das Element wie das HTML-Element <tbody> verhält, d.h. eine oder mehrere Tabellenreihen zusammenfaßt.

table-header-group

Definiert, dass sich das Element wie das HTML-Element <thead> verhält, d.h. eine oder mehrere Tabellenzellen zusammenfaßt, die dann vor allen anderen Tabellenzellen und nach einer evtl. auftretenden Tabellenüberschrift ausgegeben werden. Bei der Druckausgabe kann ein Anwenderprogramm dieses Element am Kopf jeder Seite ausgeben, über die die Tabelle sich hinzieht.

table-footer-group

Definiert, dass sich das Element wie das HTML-Element <tfoot> verhält, d.h. eine oder mehrere Tabellenzellen zusammenfaßt, die dann nach allen anderen Tabellenzellen und vor einer evtl. auftretenden Tabellenunterschrift ausgegeben werden. Bei der Druckausgabe kann ein Anwenderprogramm dieses Element am Fuß jeder Seite ausgeben, über die die Tabelle sich hinzieht.

table-column

Definiert, dass sich das Element wie das HTML-Element <col> verhält: die so definierten Werte wirken auf alle Zellen einer senkrecht untereinander angeordneten Spalte. Da Tabellenspalten nicht im Dokumentstammbaum auftauchen, werden sie nicht als Element dargestellt. Dennoch können sie Attribute aufweisen, die sich bei der Darstellung der Tabellenzellen auswirken.

table-column-group

Definiert, dass sich das Element wie das HTML-Element <colgroup> verhält, d.h. die Definitionen für eine oder mehrere Spalten einer Tabelle zusammenfaßt.

table-cell

Definiert, dass sich das Element wie das HTML-Element <td> verhält, d.h. wie eine einzelne Zelle einer Tabelle.

table-caption

Definiert, dass sich das Element wie das HTML-Element <caption> verhält, d.h. eine Tabellenunterschrift oder -überschrift generiert.

Zusammenhänge zwischen display, position und float

Diese drei Eigenschaften sind verantwortlich für das Layout und die Generierung der Boxes eines Webdokuments. Sie arbeiten folgendermaßen zusammen:

• Wenn für das display eines Elementes der Wert none deklariert ist, dann sind position und float nicht relevant und das Element generiert keine Boxes.
• Wenn der Wert für display nicht none ist, gilt folgendes:
  • Wenn der Wert für position entweder absolute oder fixed ist, dann ist die Box absolut positioniert und der Berechnete Wert für float ist immer none (der Ausgangswert), auch wenn er anders spezifiziert wurde. Der Berechnete Wert für display wird entsprechend der unten stehenden Tabelle gesetzt. Die Position der Box wird in diesem Fall festgelegt durch die Eigenschaften top, right, bottom und left und den umschließenden Block der Box.
  • Wenn der Wert für position entweder static oder relative ist, dann gilt:
    • Wenn float einen der Werte left, right oder inherit enthält, dann gilt die Box als floatiert. Auch in diesem Fall wird der Berechnete Wert für display nach der unten stehenden Tabelle gesetzt.
    • Wenn für float der Wert none deklariert ist, wird unterschieden:
      • Ist das Element das Stammelement html, dann wird der Berechnete Wert für display nach der unten stehenden Tabelle gesetzt.
      • Anderenfalls wird der Spezifizierte Wert als Berechneter Wert verwendet.

Code-Beispiel:

DIV.tabelle { display:table; color:blue; } DIV.tbzelle { display:table-cell; border:1px solid; }

Wechselwirkungen:

speak, visibility

Besonderheiten im Medientyp handheld:

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1.

Die Deklaration display:none ist die wichtigste Deklaration, wenn Webdokumente für verschiedene Medien konzipiert werden sollen.

Weitere Charakteristika:

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.