CSS/Eigenschaften/Anzeige/display

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft display wird festgelegt, welche Art von Box ein Element erzeugt. Jedes Element kann Null oder mehr Boxen erzeugen.

Inhaltsverzeichnis

[Bearbeiten] Der normale Elementfluss

Der normale Elementfluss beschreibt das Verhalten von Elementen (genauer: von Boxen), die nicht positioniert oder gefloatet wurden. Dieser Abschnitt gibt einen allgemeinen Einblick in die verschiedenen Box-Typen und deren Verhalten im normalen Elementfluss.

Von einem Element sagt man, dass es sich im Fluss befindet, wenn es sich nicht um das Wurzelelement handelt und weder gefloatet noch absolut positioniert ist.

[Bearbeiten] Die display-Eigenschaft

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Mit der Eigenschaft display wird festgelegt, welche Art von Box von einem Element erzeugt wird. Jedes Element kann Null oder mehr Boxen erzeugen.

Die Werte, die die display-Eigenschaft besitzen kann, werden nachfolgend mit den typischen Verhaltensweisen der Elemente im normalen Elementfluss beschrieben.

Beachten Sie: Wenn in den nachfolgenden Abschnitten von den Eigenschaften width und height gesprochen wird, bezieht sich der Text ebenfalls auf die Eigenschaften min-width, max-width, min-height und max-height.
Beachten Sie: Die display-Eigenschaft wurde bisher von jedem CSS-Standard erweitert. Berücksichtigen Sie daher in den nachfolgenden Abschnitten ggf. abweichende Angaben zur Browserunterstützung.

[Bearbeiten] inline: Inline-Box(en)

Elemente mit display: inline; erzeugen eine oder mehrere Inline-Boxen. Inline-Boxen verlaufen auf einer Zeile horizontal in der Schreibrichtung der verwendeten Sprache. Im Deutschen also von links nach rechts, in hebräischen oder arabischen Texten von rechts nach links. Eine Inline-Box wird in mehrere Teile zerlegt, wenn sie nicht in einer Zeile Platz hat oder Zeilenumbrüche enthält.

Inline-Boxen können Innen- und Außenabstände sowie Rahmen besitzen. Vertikale Abstände und Rahmen besitzen jedoch keine Auswirkungen auf die Zeilenhöhe. Seitliche Abstände und Rahmen werden nur einmal, am Anfang und am Ende der ungeteilten Box, gezeichnet.

Die Breite von Inline-Boxen wird allein durch den Inhalt bestimmt. Die width-Eigenschaft ist wirkungslos. Die Teile einer aufgeteilten Inline-Box nehmen nur die Breite ein, die der Inhalt auch tatsächlich benötigt.

Die Höhe einer Inline-Box ist in der Regel von der verwendeten Schriftart abhängig, auch wenn die Inline-Box keine Inhalte besitzt. Bisher (Stand März 2012) definiert CSS kein genaues Vorgehen für die Berechnung der Höhe. Die height-Eigenschaft ist wirkungslos. Die Höhe einer Inline-Box kann die Höhe einer Zeile (vergleiche die line-height-Eigenschaft) beeinflussen.

Horizontal können Inline-Boxen mit der Eigenschaft text-align ausgerichtet werden. Befinden sich verschiedenhohe Inline-Boxen auf einer Zeile, kann die vertikale Ausrichtung der Boxen zueinander mit Hilfe der Eigenschaft vertical-align festgelegt werden.

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Beispiele für verschiedene Eigenschaften von
    Elementen mit display: inline;</title>
    <style>
    #beispiel1 { width: 11em; line-height: 2; }
    #beispiel1 span { margin: 1em; border: 2px solid green; }
 
    #beispiel2 code { font-size: 1.5em; line-height: 3em; vertical-align: top; }
    </style>
  </head>
  <body>
    <h1>Beispiele für verschiedene Eigenschaften von
    Elementen mit <code>display: inline;</code></h1>
    <h2>Erstes Beispiel</h2>
    <p id="beispiel1"><span>Inline-Boxen können auf mehrere 
    Zeilen aufgeteilt werden.</span></p>
    <h2>Zweites Beispiel</h2>
    <p id="beispiel2">Inline-Boxen mit unterschiedlicher Höhe können 
    mit <code>vertical-align</code> zueinander ausgerichtet werden.</p>
  </body>
</html>
In diesem Beispiel erzeugen die Elemente code und span Inline-Boxen.

Das erste Beispiel zeigt eine Inline-Box, die auf mehrere Zeilen aufgeteilt wird. Die Breite der einzelnen Boxen richtet sich nach dem Inhalt. Die seitlichen Abstände und Rahmen werden nur am Anfang der ersten Box bzw. am Ende der letzten Box dargestellt. Ohne die Festlegung einer line-height würden sich die Rahmen ober- und unterhalb der Box überlappen.

Im zweiten Beispiel befinden sich Inline-Boxen unterschiedlicher Größe auf einer Zeile. Mit Hilfe der Eigenschaft vertical-align werden die Boxen an ihrer Oberkante auf der Zeile ausgerichtet.

[Bearbeiten] block: Block-Box

[Bearbeiten] Größe und Ausdehnung

Block-Boxen nehmen die gesamte Breite des Elternelementes ein. Sie sind so hoch wie ihr Inhalt. Dadurch entsteht ein zusammenhängendes Rechteck, das aussieht wie eine Box und dieser Darstellungsart ihren Namen gibt.

Mehrere Block-Boxen werden untereinander angeordnet (normaler Elementfluss).

Beispiele für Blockelemente sind Absätze(p). Die Absätze dieses Artikels stehen alle untereinander und nehmen jeder für sich die gesamte Breite des Inhaltsbereiches ein.

Die Höhe eines Blockelementes wird von der Höhe des Inhaltes bestimmt: hat ein Absatz viele Worte, wird das Element groß (hoch), enthält es gar nichts, ist die Höhe des Inhaltes gleich null.

[Bearbeiten] Block-Boxen im Zusammenspiel mit ihrer Umgebung

Auch leere Block-Boxen werden vom Browser dargestellt und sind oft anhand ihrer Abstände und Rahmen zu sehen. Eine Ausnahme bilden Blockelemente, die nur Außenabstände besitzen, denn die vertikalen Außenabstände von Block-Boxen können zusammenfallen.

Jedes Blockelement bildet eine Block-Formatierungs-Umgebung. Die erste Block-Formatierungs-Umgebung in HTML-Dokumenten wird vom Wurzeldokument (html-Element) erzeugt.

Mit der Angabe von display: block; können Sie den Browser anweisen, Elemente als Block-Boxen darzustellen, die keine Blockelemente sind.

Sobald Sie eine Breite angeben, ersetzen Sie die automatische Breitenbestimmung (Breite des Elternelementes) durch den angegebenen Wert (z. B. 10cm).

Beachten Sie, dass sich Breitenangaben auf den Inhalt des Elementes beziehen. Darum ist width: 100% (Inhalt ist so breit wie das Elternelement plus Innenabstand und Rahmen) nicht dasselbe wie width: auto (Element füllt inklusive Rahmen und Innenabstände den Inhaltsbereich des Elternelementes komplett aus).

Ein Blockelement mit einer Breitenangabe von 100% und einem Rahmen ragt optisch aus dem Elternelement heraus.

Ist eine Block-Box inklusive Innenabstand und Rahmen schmaler als das Elternelement, können Sie es im Elternelement horizontal zentrieren, indem Sie den Browser anweisen, links und rechts automatisch gleich breite Außenabstände hinzuzufügen. Geben Sie hierzu für margin-left und margin-right) den Wert auto an.

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Beispiele für das Verhalten von Block-Boxen 
    im normalen Elementfluss</title>
    <style>
    #inhalte { width: 20em; border: 2px dashed green; }
    p { margin: 1em; border: 2px solid blue; padding: 0.5em; }
    p:first-child { width: 100%; }
    .ende { width: 10em; margin-left: auto; margin-right: auto; }
    </style>
  </head>
  <body>
    <h1>Beispiele für das Verhalten von Block-Boxen 
    im normalen Elementfluss</h1>
    <div id="inhalte">
     <p>Der erste Absatz besitzt eine Breitenangabe.</p>
     <p>Der zweite Absatz besitzt keine Breitenangabe.</p>
     <p class="ende">Der dritte Absatz wird zentriert.</p>
    </div>
  </body>
</html>
In diesem Beispiel erzeugen (unter anderem) die Elemente h1, div und p Block-Boxen. In HTML besitzen diese Elemente display: block; als Standarddefinition.

Da für den ersten Absatz eine Breite von 100% festgelegt wurde, ragt das Element (mit blauem Rahmen) aus seinem Elternelement (grün gestrichelter Rahmen) heraus, denn zur Breite - die exakt so breit ist, wie das Elternelement - werden noch seitliche Innen- und Außenabstände sowie die Rahmenbreite hinzuaddiert.

Der zweite Absatz besitzt keine Breite, daher passt sich das Element an die im Elternelement verfügbare Breite an.

Das dritte Element besitzt nur eine geringere Breite als das Elternelement, daher ist es möglich, die seitlichen Außenabstände automatisch berechnen zu lassen. Dies führt zur zentrierten Positionierung des Blockelements.

Beachten Sie auch, dass die vertikalen Abstände zwischen den Absatzelementen zusammenfallen.

Hinweis

Ein Element erzeugt selbst eine Block-Formatierungs-Umgebung, wenn der Wert seiner overflow-Eigenschaft nicht visible lautet. In diesem Zustand fallen die Außenabstände der Box nicht mit den Außenabständen der Kindelemente zusammen.

[Bearbeiten] inline-block: Außen Inline-Box, innen Block-Box

  • CSS 2.1
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Elemente mit display: inline-block; erzeugen eine Box, die Eigenschaften von Inline- und Block-Boxen kombiniert.

Eine Inline-Block-Box verläuft wie eine Inline-Box auf einer Textzeile, kann aber nicht auf mehrere Zeilen aufgeteilt werden. Besitzt ein Inline-Block vertikale Innen- und Außenabstände oder Rahmen, so beeinflussen diese die Höhe der Zeile. Die horizontale und vertikale Ausrichtung von Inline-Block-Elementen erfolgt wie bei Inline-Boxen.

Die Breite einer Inline-Block-Box wird mit dem shrink-to-fit-Verfahren berechnet, d.h. die Box ist so breit wie nötig und so schmal wie möglich. Die Breite eines Inline-Blocks kann mithilfe der width-Eigenschaft festgelegt werden.

Die Höhe einer Inline-Block-Box ist wie bei Block-Boxen vom Inhalt abhängig, kann aber auch durch die height-Eigenschaft festgelegt werden.

Inline-Blöcke erzeugen eine Block-Formatierungs-Umgebung, daher können sie – im Gegensatz zu Inline-Boxen – Block-Boxen enthalten.

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Beispiele für das Verhalten von Elementen 
    mit display: inline-block;</title>
    <style>
    p, #übersicht { width: 15em; }
    span { padding: .5em; border: 2px solid green; }
    #inline-block span { display: inline-block; }
    #übersicht { margin: 0; padding: 0; text-align: center; }
    #übersicht li { display: inline-block; width: 3em; margin: .2em;
     padding: .2em; border: 2px solid green; vertical-align: top; }
    </style>
  </head>
  <body>
    <h1>Beispiele für das Verhalten von Elementen 
    mit <code>display: inline-block;</code></h1>
    <h2>Vergleich von Inline- und Inline-Block-Boxen</h2>
    <p id="inline">In diesem, etwas längerem Text, 
    befindet sich ein <span>Inline-</span>Element.</p>
    <p id="inline-block">In diesem, etwas längerem Text, 
    befindet sich ein <span>Inline-Block-</span>Element.</p>
    <h2>Ausrichtung</h2>
    <ul id="übersicht">
     <li>Fünf<br>Fünf<br>Fünf<br>Fünf<br>Fünf
     <li>Zwei<br>Zwei
     <li>Vier<br>Vier<br>Vier<br>Vier
     <li>Drei<br>Drei<br>Drei
     <li>Eins
    </ul>
  </body>
</html>
Das erste Beispiel zeigt den Unterschied zu einer Inline-Box: Eine Inline-Block-Box beeinflusst die Höhe einer Zeile, so dass auch vertikale Abstände den umgebenden Text nicht überdecken. Das zweite Beispiel zeigt, wie Listenelemente mit Hilfe von display: inline-block; horizontal zentriert und vertikal an ihrer oberen Kante ausgerichtet werden.
Beachten Sie: Der Internet Explorer unterstützt display: inline-block; erst seit Version 8 fehlerfrei. Ältere Versionen wenden die Deklaration nur auf Elemente an, die von Natur aus zu den Inline-Elementen gehören (z.B. die Elemente a und span). Ein inline-block ähnliches Verhalten kann im Internet Explorer 6 und 7 bei allen Elementen erzwungen werden, wenn display: inline; zusammen mit der Microsoft-spezifischen Deklaration zoom: 1; notiert wird.

[Bearbeiten] flex

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Leer

Details: caniuse.com

Die Eigenschaften display: flex; und inline-flex; aktivieren das Flexible Box Layout Module, das es ermöglicht, responsive und flexible Layouts ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear zu erstellen.

[Bearbeiten] list-item: Block-Box und Marker-Box (Listenpunkte)

  • Leer

Elemente mit display: list-item; erzeugen zwei Boxen: Eine Hauptbox, die sich identisch zu einer Block-Box verhält, sowie eine Marker-Box, in die das Aufzählungszeichen eingefügt wird. Die Einheit aus beiden Boxen wird als „Listenpunkt“ oder „Listenelement“ bezeichnet.

Die Position der Marker-Box ist in Abhängigkeit von der direction-Eigenschaft immer in der linken (direction: ltr;) bzw. rechten (direction: rtl;) oberen Ecke der Block-Box und befindet sich auf gleicher Höhe wie die erste Zeile in der Hauptbox. Ob sich das Aufzählungszeichen inner- oder außerhalb der Block-Box befindet, wird mit der Eigenschaft list-style-position festgelegt.

Marker-Boxen besitzen keine Hintergründe, sie sind immer durchsichtig.

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Beispiele für das Verhalten von Elementen 
    mit display: list-item;</title>
    <style>
    p { display: list-item; margin-left: 2em;
     border: 1px solid green; padding: .2em; }
    .allgemeines { list-style-position: inside; }
    </style>
  </head>
  <body>
    <h1>Beispiele für das Verhalten von Elementen 
    mit <code>display: list-item;</code></h1>
    <p class="allgemeines">Ein Element mit innenstehendem Aufzählungszeichen.</p>
    <p>Ein Element mit außenstehendem Aufzählungszeichen.</p>
  </body>
</html>
Dieses Beispiel zeigt zwei Varianten für Elemente mit display: list-item;. Im ersten Beispiel befindet sich das Aufzählungszeichen (die Marker-Box) innerhalb des Absatzes, im zweiten Beispiel außerhalb davon. Die Außenabstände der Block-Boxen fallen zusammen.

Wenn das Aufzählungszeichen außerhalb der Block-Box dargestellt wird, sollte an der Seite etwas Freiraum zur Verfügung stehen. Entweder wird der Block-Box seitlich ein Außenabstand zugewiesen oder dem Elternelement ein seitlicher Innenabstand (so wird es in HTML für geordnete und ungeordnete Listen gehandhabt).

Beachten Sie: Derzeit (Stand März 2012) unterstützt Mozilla Firefox nur Symbole als Aufzählungszeichen, wenn sich der Listenpunkt nicht innerhalb eines HTML-ul-, -ol- oder -menu-Elements befindet.
Beachten Sie: Die Marker-Box wird unsichtbar, wenn sie sich außerhalb der Block-Box befindet und die Block-Box einen anderen Wert als visible für die overflow-Eigenschaft annimmt. Dies ist CSS-2.1-konform und derzeit (Stand März 2012) in allen Browsern so umgesetzt. Die CSS-Arbeitsgruppe plant jedoch, die Anzeige der Marker-Box in dieser Situation künftig zu erlauben, da dies eher dem Autorenwunsch entspricht.

[Bearbeiten] run-in: Inline- oder Block-Box

  • CSS 3.0
  • IE 8
  • Leer
  • Leer
  • Leer

Elemente mit display: run-in; erzeugen eine Run-In-Box. Eine Run-In-Box wird kontextabhängig als Inline- oder als Block-Box verarbeitet.

Elemente, die nicht gefloatet oder absolut positioniert sind und deren display-Eigenschaft den Wert block, list-item, table oder run-in besitzt, verhindern das Run-In-Verhalten.

Eine Run-In-Box wird als Block-Box dargestellt, wenn sie als Nachfahren ein Element enthält, das das Run-In-Verhalten verhindert.

Wenn es eine durch display: block; oder display: list-item; erzeugte Block-Box gibt, die - von gefloateten, absolut positionierten oder mit display: none; ausgeblendeten Boxen abgesehen - auf die Run-In-Box folgt, dann wird die Run-In-Box als Inline-Box dargestellt und vor dem durch generierte Inhalte (::before- und ::after-Pseudoelemente) erzeugten Inhalt in die Block-Box eingefügt. Die Run-In-Box erscheint dann als Teil der Block-Box.

Gibt es keine derartige Block-Box, wird die Run-In-Box als Block-Box-dargestellt.

Obwohl eine Run-In-Box Bestandteil einer Block-Box werden kann, erbt die Run-In-Box Eigenschaften nur von dem Element, das im Elementbaum die Rolle des Elternelements einnimmt.

Wird die Run-In-Box als Inline-Box dargestellt, so übernimmt die Block-Box, deren Bestandteil die Run-In-Box wird, die clear-Eigenschaft der Run-In-Box.

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Beispiele für das Verhalten von Elementen 
    mit display: run-in;</title>
    <style>
    h3 { display: run-in; font-size: 1em; }
    h4 { position: absolute; right: .5em; top: .5em; margin: 0; }
    </style>
  </head>
  <body>
    <h1>Beispiele für das Verhalten von Elementen 
    mit <code>display: run-in;</code></h1>
    <h2>Erstes Beispiel</h2>
      <h3>Run-In-Überschrift.</h3>
      <p>Run-In-Absatz.</p>
    <h2>Zweites Beispiel</h2>
      <h3>Run-In-Überschrift Eins.</h3>
      <h3>Run-In-Überschrift Zwei.</h3>
      <p>Run-In-Absatz.</p>
    <h2>Drittes Beispiel</h2>
      <h3>Run-In-Überschrift.</h3>
      <h4>Positionierte Überschrift.</h4>
      <p>Run-In-Absatz.</p>
  </body>
</html>
Das erste Beispiel zeigt die häufigste Verwendungsart der Run-In-Box: Eine Überschrift wird Teil des nachfolgenden Absatzes.

Im zweiten Beispiel befinden sich mehrere Run-In-Elemente aufeinanderfolgend. Lediglich das letzte Element wird Teil des nachfolgenden Absatzes, da eine Run-In-Box nicht Teil einer anderen Run-In-Box werden kann.

Das dritte Beispiel entspricht optisch dem ersten Beispiel. Tatsächlich befindet sich zwischen der Run-In-Box und der Block-Box eine weitere Überschrift, die auf das Run-In-Verhalten jedoch keinen Einfluss besitzt, da sie absolut positioniert wurde (sie befindet sich in der rechten oberen Ecke der Seite).
Beachten Sie: CSS 2.1 definiert nicht, ob für das :first-line-Pseudoelement angegebene Formate einer Block-Box auch auf eine Run-In-Box angewendet werden, wenn diese Teil der Block-Box wird. Derzeit (Stand März 2012) gibt es auch in CSS 3 noch kein festgelegtes Verhalten für diese Situation. Die Browser verhalten sich unterschiedlich:
  • Im Internet Explorer und im Opera Browser werden :first-line-Formate nicht auf Run-In-Boxen angewendet.
  • Im Opera Browser verhindert die Angabe von :first-line-Formaten, dass eine Run-In-Box Bestandteil einer Block-Box wird.
  • Lediglich Safari und Chrome wenden :first-line-Formate auch auf Run-In-Boxen an.
Beachten Sie: Der Run-In-Boxtyp ist derzeit (Stand März 2012) nicht völlig interoperabel implementiert.
  • Das einfache Run-In-Verhalten (siehe erstes Beispiel oben) wird von von Chrome, Opera, Safari und Internet-Explorer jeweils in der aktuellen Version korrekt umgesetzt.
  • Opera, Safari und Chrome verhindern darüber hinaus das Run-In-Verhalten auch, wenn die Run-In-Box eine Tabellenbox enthält, die sich nicht innerhalb einer Inline-Table-Box befindet.
  • Opera, Safari und Chrome verhindern zudem das Run-In-Verhalten, wenn ein gefloatetes oder absolut positioniertes Element zwischen Run-In- und Block-Box vorhanden ist.
  • Der Internet Explorer 9 lässt gefloatete und absolut positionierte Elemente zwischen Run-In- und Block-Box gänzlich verschwinden.
  • Safari und Chrome ignorieren einige Regeln, die das Run-In-Verhalten nicht zulassen.
  • Safari und Chrome unterstützen die Sonderregelung für die Anwendung der clear-Eigenschaft bei Run-In-Boxen noch nicht.
  • Mozilla Firefox unterstützt display: run-in; bisher gar nicht.

Information

Die teils gravierenden Unterschiede in der Implementierung des Run-In-Verhaltens kommen nicht von ungefähr. Zunächst wurden Run-In-Boxen in CSS 2 definiert. Diese Definition wurde dann in CSS 2.1 übernommen und überarbeitet. Aufgrund mangelnden Interesses der Browserhersteller am Run-In-Verhalten wurde dessen Definition aus CSS 2.1 gestrichen. In der CSS 3-Spezifikation ist das Run-In-Verhalten bisher nur in Arbeitsentwürfen festgelegt (Stand März 2012).


[Bearbeiten] none: Keine Box

Ein Element mit display: none; erzeugt keine Box. Das Element ist unsichtbar und hat keinerlei Auswirkungen auf den Elementfluss.

Darüber hinaus werden Inhalte, die mit display: none; versteckt werden, auch von Vorlese-Software oder unterstützender Hardware wie einer Braille-Zeile ignoriert. Elemente, deren Inhalt zugänglich, aber nicht sichtbar dargestellt werden soll, müssen stattdessen mit anderen Methoden, etwa durch Verschieben aus dem sichtbaren Bereich, versteckt werden.

[Bearbeiten] Abgrenzung zur visibility-Eigenschaft

Die Deklaration visibility: hidden; legt fest, dass die von einem Element erzeugte Box vollständig durchsichtig ist. Das Element behält dabei seine Auswirkungen auf nachfolgende Elemente bei. Elemente, für die display: none; festgelegt wurde, erzeugen dagegen gar keine Box. Diese Elemente besitzen keinerlei Einfluss auf nachfolgende Elemente im Elementfluss.

Beispiel: Gegenüberstellung von visibility: hidden und display: none; ansehen …
Im Beispiel wird ein Textabsatz wahlweise ausgeblendet (visibility: hidden;) oder nicht dargestellt. (display: none;)

Weitere Informationen finden Sie im Kapitel zur visibility-Eigenschaft.

[Bearbeiten] inherit: Erben des Box-Typs

  • CSS 2.0
  • IE 8

Ein Element mit display: inherit; erbt den Wert der display-Eigenschaft des Elternelements. Das Element erzeugt dann dieselbe Art von Box, wie das Elternelement.

[Bearbeiten] table-*: Darstellung in Tabellenform

Speziell für die Erzeugung von Tabellen mit Nicht-Tabellen-Elementen stehen weitere Angaben zu display zur Verfügung. Sie sind auf einer eigenen Seite unter CSS/Eigenschaften/Anzeige/display/Tabelle zu finden.

Siehe auch:

[Bearbeiten] Weitere Werte

[Bearbeiten] compact

  • CSS 2.0
  • CSS 3.0
  • Achtung

Der Wert compact wurde mit CSS 2 eingeführt, konnte sich jedoch nicht durchsetzen und gilt seit Verabschiedung von CSS 2.1 offiziell als gestrichen.

Die Idee des Konzepts war es, als platzsparende Maßnahme, kleine Elemente in die Außenabstände anderer Elemente hineinfallen zu lassen. Experimentelle Browserunterstützung gab es in Safari 3 und älteren Versionen des Opera Browsers, diese sind aber inzwischen entfernt worden.

Hinweis

display: compact; wurde auch in Arbeitsentwürfe für CSS 3 übernommen, gilt jedoch als „Altbestand“. Weder die CSS-Arbeitsgruppe noch die hiesigen Browserhersteller haben ein Interesse an der Weiterentwicklung des Konzepts.

[Bearbeiten] Andere Werte

Andere Werte, die die display-Eigenschaft annehmen kann, werden in diesem Kapitel nicht beschrieben. Es handelt sich dabei um Werte, die es entweder nicht mehr gibt und nie implementiert waren oder sich noch im Entwicklungsstadium befinden und noch nicht implementiert wurden.

[Bearbeiten] Zusammenwirkung von display, float und position

Die drei Eigenschaften display, float und position, die den Elementfluss und die Erzeugung von Boxen bestimmen, sind nicht vollständig miteinander vereinbar. Daher gelten folgende Regeln für das Zusammenwirken der Eigenschaften:

  • Ist für display der Wert none festgelegt, werden float und position nicht angewendet. Es wird keine Box erzeugt.
  • Anderenfalls: Wenn position den Wert absolute oder den Wert fixed besitzt, gilt das Element als absolut positioniert. Die Position wird anhand der Eigenschaften top, left, right und bottom, sowie anhand der beinhaltenden Box ermittelt. Die Box wird dann nicht gefloatet. Der berechnete Wert der Eigenschaft float entspricht none. Der berechnete Wert der display-Eigenschaft wird der nachfolgenden Tabelle entnommen.
  • Anderenfalls: Ist für die float-Eigenschaft nicht der Wert none festgelegt, gilt das Element als gefloatet. Der berechnete Wert der display-Eigenschaft wird der nachfolgenden Tabelle entnommen.
  • Anderenfalls: Wenn es sich um das Wurzelelement handelt, wird der berechnete Wert der display-Eigenschaft der nachfolgenden Tabelle entnommen. Jedoch ist derzeit (in CSS 2.1; Stand März 2012) nicht definiert, ob der festgelegte Wert list-item beibehalten oder in den berechneten Wert block umgewandelt wird.
Verhältnis von festgelegtem zu berechnetem Wert
Festgelegter Wert Berechneter Wert
inline, inline-block, run-in, table-caption, table-column-group, table-column, table-header-group, table-row-group, table-footer-group, table-row, table-cell block
inline-table table
andere wie festgelegt
Beachten Sie: Derzeit (Stand März 2012) berechnet nur Mozilla Firefox den Wert der display-Eigenschaft als block, wenn display: list-item; für das Wurzelelement festgelegt wurde.

Hinweis

Die Tabelle berücksichtigt nur display-Werte, die derzeit in mindestens einen Browser implementiert sind.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML