Zum Inhalt springen

#display

Legt das Anzeigeverhalten des Elements fest.

display: none;

Das Element wird vollständig entfernt, als ob es gar nicht im HTML-Code enthalten wäre.

display: inline;

Das Element wird in ein inline-Element umgewandelt: Es verhält sich wie einfacher Text.

Jede height und width hat keine Auswirkung.

display: block;

Das Element wird in ein Block-Element umgewandelt: Es beginnt in einer neuen Zeile und nimmt die gesamte Breite ein.

display: inline-block;

Das Element hat die gleichen Eigenschaften wie ein inline und ein Block Element:

  • inline weil sich das Element wie einfacher Text verhält und sich in einen Textblock einfügt
  • Block, weil man height und width Werte anwenden kann

Zum Beispiel hat dieses Element:

.element{
  height: 3em;
  width: 60px;
}

display: list-item;

Das Element verhält sich wie ein Listenelement: <li>. Der einzige Unterschied zu Block ist, dass ein Listenelement einen Bullet Point hat.

display: table;

Das Element verhält sich wie eine Tabelle: <table>.

Sein Inhalt und seine untergeordneten Elemente verhalten sich wie Tabellenzellen.

display: table-cell;

Das Element verhält sich wie eine Tabellenzelle: <td> oder <th>.

Sein Inhalt und seine untergeordneten Elemente verhalten sich wie Tabellenzellen.

display: table-row;

Das Element verhält sich wie eine Tabellenzeile: <tr>.

Sein Inhalt und seine untergeordneten Elemente verhalten sich wie Tabellenzellen.

display: flex;

Das Element wird in einen Flexbox-Container verwandelt. Für sich genommen verhält es sich wie ein Blockelement.

Seine untergeordneten Elemente werden in Flexbox-Elemente umgewandelt.

display: inline-flex;

Das Element hat die gleichen Eigenschaften wie ein inline und ein flexbox Element:

  • inline weil das Element sich wie einfacher Text verhält und sich in einen Textblock einfügt
  • flexbox, weil sein Kindelement in Flexbox-Elemente umgewandelt wird

Zum Beispiel hat dieses Element:

.element{
  height: 3em;
  width: 120px;
}

display: grid;

Das Element wird in einen Raster-Container umgewandelt. Für sich genommen verhält es sich wie ein Blockelement.

Seine untergeordneten Elemente werden in Gitterelemente umgewandelt.

display: inline-grid;

Das Element hat die gleichen Eigenschaften wie ein inline und ein grid Element:

  • inline weil das Element sich wie einfacher Text verhält und sich in einen Textblock einfügt
  • Raster, weil sein Kindelement in Flexbox-Elemente umgewandelt wird

Zum Beispiel, dieses Element hat:

.element{
  height: 3em;
  width: 120px;
}

Nach oben