CSS Display (Darstellung)

Die display-Eigenschaft bestimmt, wie ein Element im Dokument angezeigt wird. Sie beeinflusst grundlegend das Layout der Seite und das Verhalten der Elemente.

Grundwerte von display

Die wichtigsten Werte von display sind: block, inline, inline-block, flex, grid und none. Jeder beeinflusst das Layout eines Elements auf unterschiedliche Weise.

Wert	Effekt
block	Wird als Blockelement angezeigt und beginnt in einer neuen Zeile.
inline	Wird innerhalb der Zeile angezeigt und bricht die Zeile nicht um.
inline-block	Wird innerhalb der Zeile angezeigt, verhält sich aber wie ein Block.
flex	Erzeugt ein flexibles Layout für die Kindelemente.
grid	Erzeugt ein Rasterlayout.
none	Das Element wird nicht im Dokument angezeigt.

Beispiele für Block, Inline und Inline-Block

Im folgenden Beispiel verwenden wir drei verschiedene display-Werte, um die Unterschiede zu demonstrieren.

Das Blockelement beginnt in einer neuen Zeile, das Inline-Element bleibt in derselben Zeile, und das Inline-Block-Element kombiniert beide Eigenschaften.

Grundlagen von Flexbox

Mit dem flex-Layout können Kindelemente flexibel verteilt, skaliert und ausgerichtet werden.

Tipps zur Verwendung von display

Die richtige Wahl des display-Werts ist entscheidend für ein gutes Layout.

Verwende flex oder grid für komplexere Layouts.
Inline-block ist nützlich, wenn du mehrere Elemente in einer Zeile anordnen möchtest.
display: none entfernt das Element vollständig aus der visuellen Darstellung, bleibt aber im DOM.