CSS display-Eigenschaft

Definition und Verwendung

Die display-Eigenschaft legt den Typ der Box fest, die das Element erzeugt.

Erklärung

Diese Eigenschaft wird verwendet, um den Typ der Display-Box zu definieren, die beim Aufbau der Layout. Bei Dokumenttypen wie HTML kann es gefährlich sein, display vorsichtig zu verwenden, da es möglicherweise die bereits in HTML definierte Display-Hierarchie verletzt. Für XML, da XML keine solche Hierarchie integriert, ist display absolut notwendig.

Anmerkung:In CSS2 existierten die Werte 'compact' und 'marker', wurden jedoch aufgrund fehlender breiter Unterstützung aus CSS2.1 entfernt.

Weitere Informationen:

CSS-Tutorial:CSS-Positionierung

HTML DOM Referenzhandbuch:display-Eigenschaft

Beispiel

Erstellen Sie einen Inline-Rahmen für Absätze:

p.inline
  {
  display:inline;
  }

Versuchen Sie es selbst

CSS-Syntax

display: value;

Attributwert

Wert Beschreibung
none Dieses Element wird nicht angezeigt.
block Dieses Element wird als Block-Element angezeigt, und es gibt Zeilenumbrüche vor und nach dem Element.
inline Standard. Dieses Element wird als Inline-Element angezeigt, und es gibt keine Zeilenumbrüche vor und nach dem Element.
inline-block Inline-Block-Element (neu hinzugefügt in CSS2.1).
list-item Dieses Element wird als Liste angezeigt.
run-in Dieses Element wird je nach Kontext als Block- oder Inline-Element angezeigt.
compact Der Wert 'compact' existiert in CSS, wurde jedoch aufgrund fehlender breiter Unterstützung aus CSS2.1 entfernt.
marker In CSS gibt es den Wert marker, aber aufgrund des fehlenden breiteten Supports wurde er aus CSS2.1 entfernt.
table Dieser Element wird als Block-Tabelle dargestellt (ähnlich wie <table>), mit Zeilenumbruch vor und nach der Tabelle.
inline-table Dieser Element wird als Inline-Tabelle dargestellt (ähnlich wie <table>), ohne Zeilenumbruch vor und nach der Tabelle.
table-row-group Dieser Element wird als Gruppe einer oder mehrerer Zeilen dargestellt (ähnlich wie <tbody>).
table-header-group Dieser Element wird als Gruppe einer oder mehrerer Zeilen dargestellt (ähnlich wie <thead>).
table-footer-group Dieser Element wird als Gruppe einer oder mehrerer Zeilen dargestellt (ähnlich wie <tfoot>).
table-row Dieser Element wird als Tabellenzeile dargestellt (ähnlich wie <tr>).
table-column-group Dieser Element wird als Gruppe einer oder mehrerer Spalten dargestellt (ähnlich wie <colgroup>).
table-column Dieser Element wird als Zellenkolonne dargestellt (ähnlich wie <col>)
table-cell Dieser Element wird als Tabellenzelle dargestellt (ähnlich wie <td> und <th>)
table-caption Dieser Element wird als Tabellenkopf dargestellt (ähnlich wie <caption>)
inherit Es wird empfohlen, den Wert der Eigenschaft display vom übergeordneten Element zu übernehmen.

Technische Details

Standardwert: inline
Vererbbarkeit: nein
Version: CSS1
JavaScript-Syntax: object.style.display="inline"

TIY-Beispiel

Wie ein Element als Inline-Element dargestellt wird
Dieses Beispiel zeigt, wie ein Element als Inline-Element dargestellt wird.
Wie ein Element als Block-Element dargestellt wird
Dieses Beispiel zeigt, wie ein Element als Block-Element dargestellt wird.

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die die Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 3.0 3.1 7.0

Anmerkung:Wenn !DOCTYPE festgelegt ist, unterstützt Internet Explorer 8 (und höher) die Attributwerte "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" und "inherit".