Begriffe Grundgerüst Wichtige HTML-Tags CSS Arbeitsaufträge

Display

Die Eigenschaft display bestimmt, wie ein Element dargestellt wird.

Es gibt sehr viele Möglichkeiten, die display-Eigenschaft zu definieren. Die Wichtigsten sind unten aufgeführt. Eine vollständige Liste findest du auf www.w3schools.com

• none
  --> Das Element wird nicht dargestellt. Im Gegensatz zu visibility: hidden wird in diesem Fall das Element nicht unsichtbar dargestellt, sondern es fehlt komplett, hat also keine Auswirkung auf die folgenden Elemente.
• inline
  --> Das Element wird wie ein Buchstabe in einem Lauftext dargestellt.
• block
  --> Das Element wird als Block dargestellt, das heisst, das Element beginnt auf einer neuen Zeile und füllt die gesamte Breite der Seite aus. Das heisst, das nächste Element beginnt auch wieder auf einer neuen Zeile.
• inline-block--> Das Element wird als Block in einer Zeile dargestellt, wobei die Höhe und die Breite des Elements bestimmt werden kann. Das Element beginnt nicht auf einer neuen Zeile, sondern hat die Eingeschaften eines Buchstabens in einem Lauftext.

Unten siehst du zuerst ein generisches Beispiel, danach folgen zwei Anwendungen dieser Eigenschaft.

selector {
  display: block;
}

<p>In diesem Paragraph wird das Bild als <em>inline</em>-Element dargestellt. ... Hier folgt das Bild <img src="/html/img/car.png" style="display: inline; height: 20px"> eines Autos. ...</p>

<p>In diesem Paragraph wird das Bild als <em>block</em>-Element dargestellt. ... Hier folgt das Bild <img src="/html/img/car.png" style="display: block; height: 80px; background-color: darkgreen; padding: 10px"> eines Autos. ...</p>

<p>In diesem Paragraph wird ein Wort als <em>inline-block</em>-Element dargestellt. ... Hier folgt dieses isolierte <span style="display: inline-block; height: 50px; width: 150px; background-color: white; text-align: center">Wort</span> in einem normalen Text. ...</p>