CSS/Eigenschaften/display

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften(Weitergeleitet von Display)
Wechseln zu: Navigation, Suche

Die Eigenschaft display legt fest, welche Art von Box ein Element erzeugt. Jedes Element kann Null oder mehr Boxen erzeugen

Erlaubte Werte

Als Werte für display konnte ursprünglich nur ein einzelner Wert angegeben werden. Das CSS3-Displaymodul erweitert das um eine Mehrwort-Syntax, die das äußere und innere Verhalten einer Box getrennt beschreiben. Die Einzelworte aus CSS 2.1 werden als "vorgefertigte" Werte (precomposed values) bezeichnet.

Die Zweiwort-Syntax wird bislang nur von Firefox und Safari unterstützt. Hier bezeichnet das erste Wort das Außenverhalten des Elements und das zweite Wort legt das innere Formatierungsmodell des Elements fest.

Eine Aufstellung aller möglichen Werte finden Sie weiter unten.

Vererbung steuernde Werte inherit, initial, unset und revert
Standardwert

inline - dass bestimmte Elemente scheinbar einen anderen Defaultwert haben, liegt nicht an CSS, sondern an dem Stylesheet, das im Browser eingebaut ist. Verwenden Sie deshalb niemals display: initial;!

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel
span {
  display: block;
  float: right;
}
Normalerweise ist span ein inline-Element. Durch display: block; wird es zu einem Block-Element, das dann rechts an der Seite ausgerichtet wird.
Empfehlung: Zum besseren Verständnis wird das Studium des Artikels zum Box-Modell empfohlen.

Siehe auch

Weblinks

Einzelwort-Syntax

Die Einzelwort-Syntax wird von allen modernen Browsern unterstützt. Die mit CSS3 markierten Werte sind im Displaymodul Level 3 hinzugekommen und sind auf älteren Browsern wie Internet Explorer nicht verfügbar.

none
Das Element wird nicht dargestellt. Es existiert zwar im DOM, wird im Layout der Seite aber nicht berücksichtigt.


block
Legt fest, dass das Element der Blockformatierung unterliegt.
inline
Legt fest, dass das Element der Inlineformatierung unterliegt.
Block- oder Inlineformatierung sind nur von Bedeutung, wenn das Elternelement seinen Inhalt gemäß dem Flow-Modell anordnet. Flow ist der Normalfall, abweichende Layoutmodelle werden mittels anderer display-Werte festgelegt und sind Table, Flexbox, Grid oder Ruby.
Ein inline formatiertes Element kann auf mehrere Zeilen umgebrochen werden.
flow-root
(CSS3) Legt fest, dass das Element der Blockformatierung unterliegt und ein Flow-Root bildet - also einen neuen Blockformatierungskontext erzeugt. Dieser Wert kann frühere Workarounds zum Erzwingen von Blockformatierungskontexten (z. B. overflow:hidden) obsolet machen.
inline-block
Legt fest, dass das Element zwar im inline-Fluss bleibt, nach innen jedoch ein Flow-Root bildet. Deshalb wird das Element nicht im Textfluss seines Elternelements umgebrochen. Innerhalb des Elements ist ein Textumbruch aber möglich.
list-item
Legt fest, dass das Element der Blockformatierung unterliegt. Ein Flow-Root wird nicht gebildet, aber dem Element wird ein List-Marker zugeordnet, der mit den list-style-Eigenschaften beeinflusst werden und auf den auch die ::marker-Pseudoklasse angewendet werden kann.
run-in
Derzeit (Oktober 2022) noch in keinem Browser implementiert. Das Element wird wie ein inline-Element formatiert, das sich in den Flow des nachfolgenden Elements integriert.

Für das Flexbox Layout-Modell

flex
Das Element unterliegt der Blockformatierung und layoutet seinen Inhalt als Flexbox
inline-flex
Das Element unterliegt der Inlineformatierung und layoutet seinen Inhalt als Flexbox

Für das Grid Layout-Modell

grid
Das Element unterliegt der Blockformatierung und layoutet seinen Inhalt als Raster
inline-grid
Das Element unterliegt der Inlineformatierung und layoutet seinen Inhalt als Raster

Ferner – für Tabellen aus Nicht-Tabellen-Elementen (z.B. bei XML)

table
Das Element enthält tabellarisch angeordnete Kindelemente und erzeugt eine neue Zeile. Wirkt wie das table-Element in HTML.
inline-table
Das Element enthält tabellarisch angeordnete Kindelemente und wird im laufenden Textfluss angezeigt. Wirkt wie das table-Element in HTML, aber inline
table-row
Das Element enthält nebeneinander angeordnete Kindelemente. Wirkt wie das tr-Element in HTML
table-row-group
Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das tbody-Element in HTML
table-header-group
Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das thead-Element in HTML.
table-footer-group
Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das tfoot-Element in HTML.
table-column
Das Element steht für eine Gruppe von Elementen, die eine Spalte der Tabelle bilden. Wirkt wie das col-Element in HTML.
table-column-group
Das Element steht für eine Gruppe von Elementen mit der Eigenschaft table-cell. Wirkt wie das colgroup-Element in HTML.
table-cell
Das Element steht für eine Tabellenzelle. Wirkt wie das td-Element in HTML (auch für th-Elemente).
table-caption
Das Element steht für eine Tabellenüberschrift. Wirkt wie das caption-Element in HTML.

Zweiwort-Syntax

Diese Syntax ist derzeit nur in Firefox und Safari verfügbar. In dieser Syntax wird das Außen- und Innenverhalten eines Elements getrennt, also wie es sich in den Flow des Elternelements einfügt, und welches Layout es auf seine Kindelemente anwendet.

Erster Wert: Außenverhalten

Das Außenverhalten ist nur von Bedeutung, wenn das Elternelement Flow-Layout verwendet.

block
Das Element wird als Blockelement formatiert
inline
Das Element wird als Inlineelement formatiert
run-in
Das Element wird als Run-In Element formatiert

Zweiter Wert: Innenverhalten

flow
Das Element layoutet seinen Inhalt gemäß dem Flow-Modell (also Standardverhalten ohne spezielles Layoutmodell)
flow-root
Das Element layoutet seinen Inhalt gemäß dem Flow-Modell und bildet ein Flow-Root.
list-item
Die Angabe list-item wird als dritter Wert zusammen mit flow oder flow-root verwendet, um das Element als Listeneintrag zu formatieren.
table
Das Element layoutet seinen Inhalt als Tabelle
flex
Das Element layoutet seinen Inhalt als Flexbox
grid
Das Element layoutet seinen Inhalt als Raster
ruby
Das Element layoutet seinen Inhalt gemäß Ruby-Layout