Die Eigenschaft "display"

display ist die wichtigste CSS-Eigenschaft zur Steuerung des Layouts. Jedes HTML-Element hat einen vom Elementtyp abhängigen Standardwert für "display". Für die meisten Elemente ist das entweder block oder inline.

block

<div>

div ist das neutrale Block-Element. Ein Block-Element beginnt immer in einer neuen Zeile und wird so breit wie möglich. Weitere gebräuchliche Block-Elemente sind Überschriften h1 bis h6, Absätze p oder Formulare form. In HTML5 sind neue Block-Elemente hinzugekommen, zum Beispiel header, footer und section.

</div>

inline

span ist das neutrale Inline-Element. Ein Inline-Element kann beispielsweise Text in einem Absatz umfließen <span> z. B. so </span> ohne den Textfluss im Absatz zu stören. Das a-Element ist das gebräuchlichste Inline-Element weil es für Links verwendet wird.

none

Ein weiterer gebräuchlicher Wert für "display" ist none. Einige spezielle Elemente, wie script, nutzen none standardmäßig. Es wird häufig in JavaScript verwendet um Elemente ein- und auszublenden ohne sie tatsächlich zu löschen und neu erstellen zu müssen.

Davon zu unterscheiden ist visibility. Während die Eigenschaft display none an der Stelle wo das Element gewesen wäre keinen Freiraum lässt, hinterlässt visibility: hidden; einen leeren Platzhalter.

You found me!

Weitere display Werte

Es gibt eine Anzahl eher exotischer Werte für "display", z. B. list-item and table. Hier findest du eine vollständige Liste. Mit den Werten inline-block und flex werden wir uns später noch beschäftigen.

Danksagung

Wie ich erwähnt habe, besitzt jedes Element einen Standardwert. Dieser lässt sich aber immer überschreiben. Während es keinen Sinn macht ein inline div zu erstellen, lässt sich diese aber Möglichkeit ausnutzen um einem Element einen passenden Display-Wert zu geben. Ein typisches Beispiel ist, Listenelemente mit display: inline zu versehen um ein horizontales Navigationsmenü zu erstellen.

  • Creative Commons License