CSS displayEigenschaft
Beispiel
Verschiedene Werte für die display-Eigenschaft festlegen:
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
Selbst ausprobieren »
Attributdefinition und Verwendungshinweise
Die display-Eigenschaft legt fest, ob ein Element als Block- oder Inline-Element behandelt wird und welches Layout für seine untergeordneten Elemente verwendet wird, wie Flow-Layout, Grid-Layout oder Flex-Layout.
Formal legt die display-Eigenschaft die inneren und äußeren Anzeigetypen eines Elements fest.
| Standardwert: | inline |
|---|---|
| Vererbt: | nein |
| Version: | CSS1 |
| JavaScript-Syntax: | object.style.display="inline" |
/* Voreingestellte Werte */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;
/* Box generieren */
display: none;
display: contents;
/* Syntax für zwei Werte */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;
/* Andere Werte */
display: table;
display: table-row; /* Alle Tabellenelemente haben einen Wert, der der CSS-Eigenschaft display entspricht */
display: list-item;
/* Globale Werte */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;
/* Box generieren */
display: none;
display: contents;
/* Syntax für zwei Werte */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;
/* Andere Werte */
display: table;
display: table-row; /* Alle Tabellenelemente haben einen Wert, der der CSS-Eigenschaft display entspricht */
display: list-item;
/* Globale Werte */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;
Browser-Unterstützung
Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen, gefolgt von -webkit-, -ms- oder -moz-, geben die erste Browserversion an, die die mit Präfix versehene Eigenschaft unterstützte.
| Eigenschaft | |||||
|---|---|---|---|---|---|
| display | 4.0 | 8.0 Teilweise ab 5.5 |
3.0 | 3.1 | 7.0 |
Eigenschaftswert
| Wert | Beschreibung |
|---|---|
| none | Dieses Element wird nicht angezeigt. |
| block | Dieses Element wird als Block-Level-Element mit Zeilenumbrüchen davor und danach angezeigt. |
| inline | Standard. Dieses Element wird als Inline-Element angezeigt, ohne Zeilenumbrüche davor oder danach. |
| inline-block | Inline-Block-Element. (Neuer Wert in CSS2.1) |
| list-item | Dieses Element wird als Liste angezeigt. |
| run-in | Dieses Element wird je nach Kontext als Block-Level- oder Inline-Element angezeigt. |
| compact | Der Wert compact existiert in CSS, wurde jedoch aufgrund fehlender breiter Unterstützung aus CSS2.1 entfernt. |
| marker | Der Wert marker existiert in CSS, wurde jedoch aufgrund fehlender breiter Unterstützung aus CSS2.1 entfernt. |
| table | Dieses Element wird als Block-Level-Tabelle (ähnlich <table>) dargestellt, mit Zeilenumbrüchen vor und nach der Tabelle. |
| inline-table | Dieses Element wird als Inline-Tabelle (ähnlich <table>) dargestellt, ohne Zeilenumbrüche vor oder nach der Tabelle. |
| table-row-group | Dieses Element wird als Gruppierung einer oder mehrerer Zeilen (ähnlich <tbody>) dargestellt. |
| table-header-group | Dieses Element wird als Gruppierung einer oder mehrerer Zeilen (ähnlich <thead>) dargestellt. |
| table-footer-group | Dieses Element wird als Gruppierung einer oder mehrerer Zeilen (ähnlich <tfoot>) dargestellt. |
| flow-root | Erzeugt eine Elementbox auf Blockebene, die einen neuen Blockformatierungskontext erstellt und das Wurzelelement des Formatierungskontexts definiert. |
| table-row | Dieses Element wird als Tabellenzeile angezeigt (ähnlich wie <tr>). |
| table-column-group | Dieses Element wird als Gruppierung aus einer oder mehreren Spalten angezeigt (ähnlich wie <colgroup>). |
| table-column | Dieses Element wird als Spalte von Zellen angezeigt (ähnlich wie <col>) |
| table-cell | Dieses Element wird als Tabellenzelle angezeigt (ähnlich wie <td> und <th>) |
| table-caption | Dieses Element wird als Tabellenbeschriftung angezeigt (ähnlich wie <caption>) |
| inherit | Gibt an, dass der Wert der Eigenschaft display vom Elternelement geerbt werden soll. |
Weitere Beispiele
Beispiel
Einstellungendisplay: contents;display:
.a {
display: contents;
border: 2px solid red;
background-color: #ccc;
padding: 10px;
width: 200px;
}
.b {
border: 2px solid blue;
background-color: lightblue;
padding: 10px;
}
Selbst ausprobieren »
Beispiel
Einstellungendisplay: inherit;Display, das zeigt, wie man den Wert einer geerbten Eigenschaft verwendet:
body {
display: inline;
}
p {
display: inherit;
}
Selbst ausprobieren »
Beispiel
Einstellungendisplay: flex;display:
div {
display: flex;
flex-direction: row-reverse;
}
Selbst ausprobieren »
Ähnliche Artikel
CSS-Tutorial:CSS Display und Sichtbarkeit
Weitere Erweiterungen